快捷導(dǎo)航

Ajax+PHP 邊學(xué)邊練之四表單

更新時(shí)間：2009年11月27日 17:29:45 作者：

通過上一篇文章已經(jīng)了解到如何利用Ajax和PHP對(duì)數(shù)據(jù)庫進(jìn)行數(shù)據(jù)讀取，這樣可以動(dòng)態(tài)的獲取到數(shù)據(jù)庫的最新數(shù)據(jù)。本篇?jiǎng)t繼續(xù)介紹通過表單（Form）向數(shù)據(jù)庫中寫入數(shù)據(jù)。

談到Form就涉及到一個(gè)發(fā)送請(qǐng)求方式問題（GET和POST），對(duì)于GET和POST的使用和區(qū)別在本文就不詳細(xì)說明了，一般對(duì)于Web開發(fā)由于POST傳值為隱式且傳輸數(shù)據(jù)量較大所以比較常用。在本例中對(duì)functions.js進(jìn)行下修改，將創(chuàng)建XMLHttp對(duì)象程序創(chuàng)建為一個(gè)函數(shù)processajax。

復(fù)制代碼代碼如下:

 
function processajax (serverPage, obj, getOrPost, str){ 
//將創(chuàng)建XMLHttpRequest對(duì)象寫到getxmlhttp()函數(shù)中，并獲取該對(duì)象 
xmlhttp = getxmlhttp (); 
//GET方式（和前面幾篇一樣） 
if (getOrPost == "get"){ 
xmlhttp.open("GET", serverPage); 
xmlhttp.onreadystatechange = function(){ 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
obj.innerHTML = xmlhttp.responseText; 
} 
} 
xmlhttp.send(null); 
} 
//POST方式 
else{ 
//第三個(gè)true參數(shù)將打開異步功能 
xmlhttp.open("POST", serverPage, true); 
//創(chuàng)建POST請(qǐng)求 
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=GB2312"); 
xmlhttp.onreadystatechange = function() { 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
obj.innerHTML = xmlhttp.responseText; 
} 
} 
//表單（Form）傳值 
xmlhttp.send(str); 
} 
} 

在下圖中當(dāng)點(diǎn)擊“Submit”按鈕后會(huì)激發(fā)submitform函數(shù)（functions.js），在該函數(shù)中會(huì)通過getformvalues函數(shù)檢查Form內(nèi)容是否都填寫完畢，否則提示哪項(xiàng)未填寫。當(dāng)檢查通過后會(huì)調(diào)用process_task.php程序，它會(huì)將Form值寫入數(shù)據(jù)庫。

submitform 函數(shù)：

復(fù)制代碼代碼如下:

 
function submitform (theform, serverPage, objID, valfunc){ 
var file = serverPage; 
//檢查Form值 
var str = getformvalues(theform,valfunc); 
//Form全部填寫 
if (aok == true){ 
obj = document.getElementById(objID); 
//運(yùn)行Ajax進(jìn)行傳值 
processajax(serverPage, obj, "post", str); 
} 
} 

getformvalues 函數(shù)：

復(fù)制代碼代碼如下:

 
function getformvalues (fobj, valfunc){ 
var str = ""; 
aok = true; 
var val;     
//遍歷Form中所有對(duì)象 
for(var i = 0; i < fobj.elements.length; i++){ 
if(valfunc){ 
if (aok == true){ 
val = valfunc (fobj.elements[i].value,fobj.elements[i].name); 
if (val == false){ 
aok = false; 
} 
} 
} 
str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&"; 
} 
//將Form值以String形式返回 
return str; 
} 

process_task.php 程序：

復(fù)制代碼代碼如下:

 
<?php 
require_once ("dbconnector.php"); 
opendatabase(); 
//對(duì)數(shù)據(jù)預(yù)處理 
$yourname = strip_tags (mysql_real_escape_string ($_POST['yourname'])); 
$yourtask = strip_tags (mysql_real_escape_string ($_POST['yourtask'])); 
$thedate = strip_tags (mysql_real_escape_string ($_POST['thedate'])); 
//創(chuàng)建Insert語句 
$myquery = "INSERT INTO task (name, thedate, description) VALUES ('$yourname','$thedate','$yourtask')"; 
//執(zhí)行SQL語句 
if (!mysql_query ($myquery)){ 
header ("Location: theform.php?message=There was a problem with the entry."); 
exit; 
} 
//返回成功信息 
header ("Location: theform.php?message=Success"); 
?> 