Ajax+PHP 邊學邊練之四 表單

談到Form就涉及到一個發送請求方式問題（GET和POST），對於GET和POST的使用和區別在本文就不詳細說明了，一般對於Web開發由於POST傳值為隱式且傳輸資料量較大所以比較常用。在本例中對functions.js進行下修改，將建立XMLHttp對象程式建立為一個函數processajax。 複製代碼 代碼如下:function processajax (serverPage, obj, getOrPost, str){
//將建立XMLHttpRequest對象寫到getxmlhttp()函數中，並擷取該對象
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{
//第三個true參數將開啟非同步功能
xmlhttp.open("POST", serverPage, true);
//建立POST請求
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);
}
}

在中當點擊“Submit”按鈕後會激發submitform函數（functions.js），在該函數中會通過getformvalues函數檢查Form內容是否都填寫完畢，否則提示哪項未填寫。當檢查通過後會調用process_task.php程式，它會將Form值寫入資料庫。

submitform 函數： 複製代碼 代碼如下:function submitform (theform, serverPage, objID, valfunc){
var file = serverPage;
//檢查Form值
var str = getformvalues(theform,valfunc);
//Form全部填寫
if (aok == true){
obj = document.getElementById(objID);
//運行Ajax進行傳值
processajax(serverPage, obj, "post", str);
}
}

getformvalues 函數： 複製代碼 代碼如下:function getformvalues (fobj, valfunc){
var str = "";
aok = true;
var val;
//遍曆Form中所有對象
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 程式： 複製代碼 代碼如下:<?php
require_once ("dbconnector.php");
opendatabase();
//對資料預先處理
$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']));
//建立Insert語句
$myquery = "INSERT INTO task (name, thedate, description) VALUES ('$yourname','$thedate','$yourtask')";
//執行SQL語句
if (!mysql_query ($myquery)){
header ("Location: theform.php?message=There was a problem with the entry.");
exit;
}
//返回成功資訊
header ("Location: theform.php?message=Success");
?>

原始碼下載