JQuery打造PHP的AJAX表單提交實(shí)例

更新時(shí)間：2009年11月03日 23:29:19 作者：

本實(shí)例只利用到JQuery類庫(kù)本身的函數(shù)和功能，不需要第三方插件的支持。另外，所有表單信息都是利用PHPMailer類庫(kù)郵件的形式發(fā)送給管理員。

如果你對(duì)JQuery的基本語(yǔ)法還不是很熟悉，請(qǐng)搜索本站的教程資源。如果你對(duì)PHPMailer用法不熟悉，請(qǐng)查看本站的另一篇文章《使用PHPMailer類庫(kù)發(fā)送電子郵件》。

第一步，創(chuàng)建一個(gè)表單HTML頁(yè)面

這里，我們只展示主要的表單部分HTML結(jié)構(gòu)代碼：

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

 
<div id="contact_form"> 
<form name="contact" method="post" action=""> 
<fieldset> 
<label for="name" id="name_label">姓名</label> 
<input type="text" name="name" id="name" size="30" value="" class="text-input" /> 
<label class="error" for="name" id="name_error">此項(xiàng)必填</label> 

<label for="email" id="email_label">您的Email</label> 
<input type="text" name="email" id="email" size="30" value="" class="text-input" /> 
<label class="error" for="email" id="email_error">此項(xiàng)必填</label> 

<label for="phone" id="phone_label">您的聯(lián)系電話</label> 
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> 
<label class="error" for="phone" id="phone_error">此項(xiàng)必填</label> 

<br /> 
<input type="submit" name="submit" class="button" id="submit_btn" value="我要發(fā)送" /> 
</fieldset> 
</form> 
</div> 

幾點(diǎn)注意：

這里用一個(gè)id為contact_form來(lái)包含整個(gè)包含信息；這是有意義的，稍后在JavaScript與用戶交互信息的時(shí)候會(huì)用到。
大家應(yīng)該注意到了，這里form標(biāo)簽的屬性里面既包含了method和action；這個(gè)意義其實(shí)不大，因?yàn)镴avascript直接操作DOM，所以沒有這兩個(gè)屬性也是可以的；
務(wù)必要給用戶輸入的<input>標(biāo)簽加獨(dú)立的id，這和第二點(diǎn)原理類似。否則，無(wú)法看到正常的效果。

第二步，開始添加JQuery代碼

這里假設(shè)你已經(jīng)從JQuery官方網(wǎng)站上下載了JQuery基庫(kù)，然后上傳到了你的WEB服務(wù)器，并添加到你要使用的網(wǎng)頁(yè)中了。

現(xiàn)在另外新建一個(gè)JS文件，添加如下代碼：

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

 
$(function() { 
$(".button").click(function() { 
// 處理表單驗(yàn)證和交給后臺(tái)處理的邏輯 
}); 
}); 

第一行的function()函數(shù)與Jquery的document.ready函數(shù)用法和功能相同，都是在DOM準(zhǔn)備完畢后自動(dòng)觸發(fā)。
第二行里面是一個(gè)單擊觸發(fā)函數(shù)click()，需要注意的是，在HTML一頁(yè)提交按鈕上需要放置一個(gè)名為“button”的Class，以模擬實(shí)現(xiàn)submi提交表單的功能.
從第二點(diǎn)我們可以看出，JQuery可以很好的將結(jié)構(gòu)和邏輯分離。
第三步，編寫驗(yàn)證代碼

在實(shí)際應(yīng)用中，這一步是必不可少的。在用戶漏填，錯(cuò)填某個(gè)項(xiàng)目時(shí)，及時(shí)提示。

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

 

$(function() { 
$('.error').hide(); 
$(".button").click(function() { 
// 驗(yàn)證代碼 

$('.error').hide(); 
var name = $("input#name").val(); 
if (name == "") { 
$("label#name_error").show(); 
$("input#name").focus(); 
return false; 
} 
var email = $("input#email").val(); 
if (email == "") { 
$("label#email_error").show(); 
$("input#email").focus(); 
return false; 
} 
var phone = $("input#phone").val(); 
if (phone == "") { 
$("label#phone_error").show(); 
$("input#phone").focus(); 
return false; 
} 

}); 
}); 

幾點(diǎn)注意：
第2行，我們添加一個(gè)$('.error').hide()是為了在用戶未輸入任何信息時(shí)隱藏三個(gè)class="error"提示錯(cuò)誤的label標(biāo)簽。而只有當(dāng)出現(xiàn)錯(cuò)誤，即為空時(shí)，錯(cuò)誤才會(huì)出現(xiàn)。（因?yàn)橛衦eturn false的作用，每次僅會(huì)出現(xiàn)一個(gè)錯(cuò)誤）
在JQuery里面，獲取DOM中某個(gè)ID或者Class的值非常簡(jiǎn)單

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

 
//獲取id的值 
var name = $("input#name").val(); 
//獲取class序號(hào)為1的值 
var name = $(".name")[1].val(); 
現(xiàn)假設(shè)用戶沒有輸入姓名，處理邏輯應(yīng)該是：首先顯示錯(cuò)誤，然后將焦點(diǎn)定位在姓名上。 


if (name == "") { //用戶名為空 
$("label#name_error").show(); //錯(cuò)誤提示 
$("input#name").focus(); //焦點(diǎn)定位 
return false; //返回 
} 

在必填的字段上驗(yàn)證時(shí)，都必須return false，否則會(huì)出現(xiàn)必填項(xiàng)未填完即提交的情況。
第四步，通過(guò)Jquery的Ajax函數(shù)提交表單信息。

這是本教程實(shí)現(xiàn)無(wú)刷新提交的核心步驟，通過(guò)ajax函數(shù)來(lái)遞交javascript從DOM中獲取的表單項(xiàng)值，然后異步提交給后臺(tái)處理程序（process.php），并發(fā)送Email。此步緊接在驗(yàn)證程序之后：

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

 
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone; 
//alert (dataString);return false; 

$.ajax({ 
type: "POST", 
url: "bin/process.php", 
data: dataString, 
success: function() { 
$('#contact_form').html("<div id='message'></div>"); 
$('#message').html("<h2>聯(lián)系方式已成功提交！</h2>") 
.append("<p>Script by Code52.net</p>") 
.hide() 
.fadeIn(1500, function() { 
$('#message').append("<img id='checkmark' src='images/check.png' />"); 
}); 
} 
}); 
return false; 

以上代碼的核心函數(shù)是.ajax() ，它所起得作用就是使用POST方式將已經(jīng)獲取的表單信息(dataString)異步傳送給所定義的后臺(tái)PHP url(bin/process.php)。如果數(shù)據(jù)成功傳送，它會(huì)將一系列我們定義好的信息返回給用戶。最后return false，這樣是為了防止頁(yè)面重新加載。
除了返回成功信息和發(fā)送郵件外，我們還可以做其他一些更廣泛的事情。比如，將獲得的數(shù)據(jù)交由后臺(tái)腳本處理時(shí)，將數(shù)據(jù)插入數(shù)據(jù)庫(kù)中，然后再將用戶提交的信息返回。
詳細(xì)解釋：

首先，獲取表單項(xiàng)的值，方法我們已經(jīng)在第三步中提到過(guò)了：
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
//將表單項(xiàng)的值組合成一個(gè)字符串
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
將此組合字符串的值通過(guò)AJAX函數(shù)傳遞給后臺(tái)url，如果成功，則會(huì)返回成功信息給用戶：

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

 
$.ajax({ 
type: "POST", 
url: "bin/process.php", 
data: dataString, 
success: function() { 
$('#contact_form').html("<div id='message'></div>"); 
$('#message').html("<h2>Contact Form Submitted!</h2>") 
.append("<p>We will be in touch soon.</p>") 
.hide() 
.fadeIn(1500, function() { 
$('#message').append("<img id='checkmark' src='images/check.png' />"); 
}); 
} 
}); 
return false; 

在本示例中，ajax函數(shù)的功能就只有這些了，如果你需要進(jìn)一步關(guān)于ajax函數(shù)的信息，可以參考官方文檔：jQuery's documentation on the ajax function
第五步，反饋信息給用戶的部分

首先，在信息提交成功之后，JQuery會(huì)通過(guò)以下部分動(dòng)態(tài)的替換掉<div id="contact_form"></form>中的內(nèi)容，只需要簡(jiǎn)單的一句話即可實(shí)現(xiàn)。
$('#contact_form').html("<div id='message'></div>");
所以請(qǐng)大家記住，如果你以后需要通過(guò)JavaScript動(dòng)態(tài)的替換掉某個(gè)層或者<span>，可以使用Jquery的.html方法實(shí)現(xiàn)，非常簡(jiǎn)單和方便。
其次，有了這個(gè)層肯定還不夠，因?yàn)槔锩孢€沒有內(nèi)容，所以，我們還要給id=message的這個(gè)層添加一些顯示內(nèi)容：
$('#message').html("<h2>聯(lián)系方式已成功提交！</h2>")
同樣是動(dòng)態(tài)的為id為message的層添加了一段html用于提示。還可以利用append方法在message層中追加一句：
.append("<p>We will be in touch soon.</p>")
最后，為了表現(xiàn)出提交之后，服務(wù)器處理的動(dòng)態(tài)效果，我們?cè)O(shè)置了以下特效代碼：
.hide() //整個(gè)層消失
.fadeIn(1500, function() {//在1500毫秒內(nèi)逐漸出現(xiàn)
//最后再動(dòng)態(tài)追加一個(gè)成功圖標(biāo)
$('#message').append("<img id='checkmark' src='images/check.png' />");
});

后記：如果要將此實(shí)例運(yùn)用在實(shí)際中，可能還需要對(duì)一些地方做出修改。比如，增加驗(yàn)證信息規(guī)則，在用戶提交信息的過(guò)程中設(shè)置一個(gè)Loading的圖標(biāo)等等，本教程僅作拋磚引玉之用了。另外，請(qǐng)注意，后臺(tái)提交數(shù)據(jù)給郵箱，我這里就不再解釋了。打包下載的實(shí)例中有很詳細(xì)的注釋，你需要改動(dòng)的地方僅僅是用戶名和密碼。下載壓縮包之后，你也許會(huì)發(fā)現(xiàn)里面有個(gè)runonload.js文件，此文件的作用是在加載表單文件時(shí)，將焦點(diǎn)聚焦在輸入表單上，僅此而已。

您可能感興趣的文章: