Ajax+PHP 邊學邊練之四 表單
更新時間:2009年11月27日 17:29:45 作者:
通過上一篇文章已經(jīng)了解到如何利用Ajax和PHP對數(shù)據(jù)庫進行數(shù)據(jù)讀取,這樣可以動態(tài)的獲取到數(shù)據(jù)庫的最新數(shù)據(jù)。本篇則繼續(xù)介紹通過表單(Form)向數(shù)據(jù)庫中寫入數(shù)據(jù)。
談到Form就涉及到一個發(fā)送請求方式問題(GET和POST),對于GET和POST的使用和區(qū)別在本文就不詳細說明了,一般對于Web開發(fā)由于POST傳值為隱式且傳輸數(shù)據(jù)量較大所以比較常用。在本例中對functions.js進行下修改,將創(chuàng)建XMLHttp對象程序創(chuàng)建為一個函數(shù)processajax。
function processajax (serverPage, obj, getOrPost, str){
//將創(chuàng)建XMLHttpRequest對象寫到getxmlhttp()函數(shù)中,并獲取該對象
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參數(shù)將打開異步功能
xmlhttp.open("POST", serverPage, true);
//創(chuàng)建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”按鈕后會激發(fā)submitform函數(shù)(functions.js),在該函數(shù)中會通過getformvalues函數(shù)檢查Form內(nèi)容是否都填寫完畢,否則提示哪項未填寫。當檢查通過后會調(diào)用process_task.php程序,它會將Form值寫入數(shù)據(jù)庫。
submitform 函數(shù):
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 函數(shù):
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();
//對數(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");
?>
源代碼下載
復(fù)制代碼 代碼如下:
function processajax (serverPage, obj, getOrPost, str){
//將創(chuàng)建XMLHttpRequest對象寫到getxmlhttp()函數(shù)中,并獲取該對象
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參數(shù)將打開異步功能
xmlhttp.open("POST", serverPage, true);
//創(chuàng)建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”按鈕后會激發(fā)submitform函數(shù)(functions.js),在該函數(shù)中會通過getformvalues函數(shù)檢查Form內(nèi)容是否都填寫完畢,否則提示哪項未填寫。當檢查通過后會調(diào)用process_task.php程序,它會將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);
//運行Ajax進行傳值
processajax(serverPage, obj, "post", str);
}
}
getformvalues 函數(shù):
復(fù)制代碼 代碼如下:
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 程序:
復(fù)制代碼 代碼如下:
<?php
require_once ("dbconnector.php");
opendatabase();
//對數(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");
?>
源代碼下載
相關(guān)文章
PHP下編碼轉(zhuǎn)換函數(shù)mb_convert_encoding與iconv的使用說明
mb_convert_encoding這個函數(shù)是用來轉(zhuǎn)換編碼的。原來一直對程序編碼這一概念不理解,不過現(xiàn)在好像有點開竅了。2009-12-12PHP定時執(zhí)行計劃任務(wù)的多種方法小結(jié)
PHP不支持多線程,有時候處理問題不是那么爽,今天談?wù)撘幌翽HP定時執(zhí)行的方法2011-12-12php如何實現(xiàn)不借助IDE快速定位行數(shù)或者方法定義的文件和位置
這篇文章主要介紹了php如何實現(xiàn)不借助IDE快速定位行數(shù)或者方法定義的文件和位置的相關(guān)資料,需要的朋友可以參考下2017-01-01

使用php自動備份數(shù)據(jù)庫表的實現(xiàn)方法
下面小編就為大家?guī)硪黄褂胮hp自動備份數(shù)據(jù)庫表的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07