Ajax+PHP 邊學(xué)邊練之四 表單
更新時(shí)間：2009年11月27日 17:29:45 作者：
通過(guò)上一篇文章已經(jīng)了解到如何利用Ajax和PHP對(duì)數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)讀取，這樣可以動(dòng)態(tài)的獲取到數(shù)據(jù)庫(kù)的最新數(shù)據(jù)。本篇?jiǎng)t繼續(xù)介紹通過(guò)表單（Form）向數(shù)據(jù)庫(kù)中寫入數(shù)據(jù)。
談到Form就涉及到一個(gè)發(fā)送請(qǐng)求方式問(wèn)題（GET和POST），對(duì)于GET和POST的使用和區(qū)別在本文就不詳細(xì)說(shuō)明了，一般對(duì)于Web開(kāi)發(fā)由于POST傳值為隱式且傳輸數(shù)據(jù)量較大所以比較常用。在本例中對(duì)functions.js進(jìn)行下修改，將創(chuàng)建XMLHttp對(duì)象程序創(chuàng)建為一個(gè)函數(shù)processajax。
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ù)將打開(kāi)異步功能
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ì)通過(guò)getformvalues函數(shù)檢查Form內(nèi)容是否都填寫完畢，否則提示哪項(xiàng)未填寫。當(dāng)檢查通過(guò)后會(huì)調(diào)用process_task.php程序，它會(huì)將Form值寫入數(shù)據(jù)庫(kù)。
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);
//運(yùn)行Ajax進(jìn)行傳值
processajax(serverPage, obj, "post", str);
}
}
getformvalues 函數(shù)：
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 程序：
<?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語(yǔ)句
$myquery = "INSERT INTO task (name, thedate, description) VALUES ('$yourname','$thedate','$yourtask')";
//執(zhí)行SQL語(yǔ)句
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對(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ù)將打開(kāi)異步功能
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ì)通過(guò)getformvalues函數(shù)檢查Form內(nèi)容是否都填寫完畢，否則提示哪項(xiàng)未填寫。當(dāng)檢查通過(guò)后會(huì)調(diào)用process_task.php程序，它會(huì)將Form值寫入數(shù)據(jù)庫(kù)。
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語(yǔ)句
$myquery = "INSERT INTO task (name, thedate, description) VALUES ('$yourname','$thedate','$yourtask')";
//執(zhí)行SQL語(yǔ)句
if (!mysql_query ($myquery)){
header ("Location: theform.php?message=There was a problem with the entry.");
exit;
}
//返回成功信息
header ("Location: theform.php?message=Success");
?>
源代碼下載
您可能感興趣的文章:
- Ajax提交表單時(shí)驗(yàn)證碼自動(dòng)驗(yàn)證 php后端驗(yàn)證碼檢測(cè)
- AJAX PHP無(wú)刷新form表單提交的簡(jiǎn)單實(shí)現(xiàn)(推薦)
- 基于PHP+Ajax實(shí)現(xiàn)表單驗(yàn)證的詳解
- JQuery打造PHP的AJAX表單提交實(shí)例
- thinkphp驗(yàn)證碼的實(shí)現(xiàn)(form、ajax實(shí)現(xiàn)驗(yàn)證)
- PHP+Ajax驗(yàn)證碼驗(yàn)證用戶登錄
- PHP+Ajax實(shí)現(xiàn)驗(yàn)證碼的實(shí)時(shí)驗(yàn)證
- PHP生成各種常見(jiàn)驗(yàn)證碼和Ajax驗(yàn)證過(guò)程
- Ajax和PHP正則表達(dá)式驗(yàn)證表單及驗(yàn)證碼
相關(guān)文章
php 多線程上下文中安全寫文件實(shí)現(xiàn)代碼
提供一個(gè)php多線程上下文中安全寫文件的實(shí)現(xiàn)方法。這個(gè)實(shí)現(xiàn)沒(méi)有使用php 的file lock機(jī)制，使用的是臨時(shí)文件機(jī)制。多線程中的各個(gè)線程都是對(duì)各自（每個(gè)線程獨(dú)占一個(gè)）的臨時(shí)文件寫，然后再同步到原文件中。2009-12-12
PHP下編碼轉(zhuǎn)換函數(shù)mb_convert_encoding與iconv的使用說(shuō)明
mb_convert_encoding這個(gè)函數(shù)是用來(lái)轉(zhuǎn)換編碼的。原來(lái)一直對(duì)程序編碼這一概念不理解，不過(guò)現(xiàn)在好像有點(diǎn)開(kāi)竅了。2009-12-12
PHP定時(shí)執(zhí)行計(jì)劃任務(wù)的多種方法小結(jié)
PHP不支持多線程，有時(shí)候處理問(wèn)題不是那么爽，今天談?wù)撘幌翽HP定時(shí)執(zhí)行的方法2011-12-12
php如何實(shí)現(xiàn)不借助IDE快速定位行數(shù)或者方法定義的文件和位置
這篇文章主要介紹了php如何實(shí)現(xiàn)不借助IDE快速定位行數(shù)或者方法定義的文件和位置的相關(guān)資料,需要的朋友可以參考下2017-01-01
本篇文章是對(duì)PHP中的autoload機(jī)制進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
php使用GD庫(kù)創(chuàng)建圖片縮略圖的方法
這篇文章主要介紹了php使用GD庫(kù)創(chuàng)建圖片縮略圖的方法,涉及php使用GD庫(kù)操作圖片的相關(guān)技巧,需要的朋友可以參考下2015-06-06
使用php自動(dòng)備份數(shù)據(jù)庫(kù)表的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇使用php自動(dòng)備份數(shù)據(jù)庫(kù)表的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07 
前段時(shí)間做數(shù)據(jù)分析，需要大量的IP地址查詢（每秒鐘近萬(wàn)次檢索），首先考慮到使用數(shù)據(jù)庫(kù)。
2008-08-08 
這篇文章主要介紹了php對(duì)象在內(nèi)存中的存在形式,實(shí)例分析了對(duì)象在內(nèi)存中的存儲(chǔ)及運(yùn)算原理,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02