JQuery打造PHP的AJAX表單提交執行個體

如果你對JQuery的基本文法還不是很熟悉，請搜尋本站的教程資源。如果你對PHPMailer用法不熟悉，請查看本站的另一篇文章《使用PHPMailer類庫寄送電子郵件》。

第一步，建立一個表單HTML頁面

這裡，我們只展示主要的表單部分HTML結構代碼： 複製代碼 代碼如下:<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">此項必填</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">此項必填</label>

<label for="phone" id="phone_label">您的聯絡電話</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">此項必填</label>

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

幾點注意：

這裡用一個id為contact_form來包含整個包含資訊；這是有意義的，稍後在JavaScript與使用者互動資訊的時候會用到。
大家應該注意到了，這裡form標籤的屬性裡面既包含了method和action；這個意義其實不大，因為Javascript直接操作DOM，所以沒有這兩個屬性也是可以的；
務必要給使用者輸入的<input>標籤加獨立的id，這和第二點原理類似。否則，無法看到正常的效果。

第二步，開始添加JQuery代碼

這裡假設你已經從JQuery官方網站上下載了JQuery基庫，然後上傳到了你的WEB伺服器，並添加到你要使用的網頁中了。

現在另外建立一個JS檔案，添加如下代碼： 複製代碼 代碼如下:$(function() {
$(".button").click(function() {
// 處理表單驗證和交給幕後處理的邏輯
});
});

第一行的function()函數與Jquery的document.ready函數用法和功能相同，都是在DOM準備完畢後自動觸發。
第二行裡面是一個單擊觸發函數click()，需要注意的是，在HTML一頁提交按鈕上需要放置一個名為“button”的Class，以類比實現submi提交表單的功能.
從第二點我們可以看出，JQuery可以很好的將結構和邏輯分離。
第三步，編寫驗證代碼

在實際應用中，這一步是必不可少的。在使用者漏填，錯填某個項目時，及時提示。 複製代碼 代碼如下:

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

$('.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;
}

});
});

幾點注意：
第2行，我們添加一個$('.error').hide()是為了在使用者未輸入任何資訊時隱藏三個class="error"提示錯誤的label標籤。而只有當出現錯誤，即為空白時，錯誤才會出現。（因為有return false的作用，每次僅會出現一個錯誤）
在JQuery裡面，擷取DOM中某個ID或者Class的值非常簡單 複製代碼 代碼如下://擷取id的值
var name = $("input#name").val();
//擷取class序號為1的值
var name = $(".name")[1].val();
現假設使用者沒有輸入姓名，處理邏輯應該是：首先顯示錯誤，然後將焦點定位在姓名上。

if (name == "") { //使用者名稱為空白
$("label#name_error").show(); //錯誤提示
$("input#name").focus(); //焦點定位
return false; //返回
}

在必填的欄位上驗證時，都必須return false，否則會出現必填項未填完即提交的情況。
第四步，通過Jquery的Ajax函數提交表單資訊。

這是本教程實現無重新整理提交的核心步驟，通過ajax函數來遞交javascript從DOM中擷取的表單項值，然後非同步提交給幕後處理程式（process.php），並發送Email。此步緊接在驗證程式之後： 複製代碼 代碼如下: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>連絡方式已成功提交！</h2>")
.append("<p>Script by Code52.net</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;

以上代碼的核心函數是.ajax() ，它所起得作用就是使用POST方式將已經擷取的表單資訊(dataString)非同步傳送給所定義的後台PHP url(bin/process.php)。如果資料成功傳送，它會將一系列我們定義好的資訊返回給使用者。最後return false，這樣是為了防止頁面重新載入。
除了返回成功資訊和發送郵件外，我們還可以做其他一些更廣泛的事情。比如，將獲得的資料交由後台指令碼處理時，將資料插入資料庫中，然後再將使用者提交的資訊返回。
詳細解釋：

首先，擷取表單項的值，方法我們已經在第三步中提到過了：
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
//將表單項的值組合成一個字串
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
將此組合字元串的值通過AJAX函數傳遞給後台url，如果成功，則會返回成功資訊給使用者： 複製代碼 代碼如下:$.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函數的功能就只有這些了，如果你需要進一步關於ajax函數的資訊，可以參考官方文檔：jQuery's documentation on the ajax function
第五步，反饋資訊給使用者的部分

首先，在資訊提交成功之後，JQuery會通過以下部分動態替換掉<div id="contact_form"></form>中的內容，只需要簡單的一句話即可實現。
$('#contact_form').html("<div id='message'></div>");
所以請大家記住，如果你以後需要通過JavaScript動態替換掉某個層或者<span>，可以使用Jquery的.html方法實現，非常簡單和方便。
其次，有了這個層肯定還不夠，因為裡面還沒有內容，所以，我們還要給id=message的這個層添加一些顯示內容：
$('#message').html("<h2>連絡方式已成功提交！</h2>")
同樣是動態為id為message的層添加了一段html用於提示。還可以利用append方法在message層中追加一句：
.append("<p>We will be in touch soon.</p>")
最後，為了表現出提交之後，伺服器處理的動態效果，我們設定了以下特效代碼：
.hide() //整個層消失
.fadeIn(1500, function() {//在1500毫秒內逐漸出現
//最後再動態追加一個成功表徵圖
$('#message').append("<img id='checkmark' src='images/check.png' />");
});

後記：如果要將此執行個體運用在實際中，可能還需要對一些地方做出修改。比如，增加驗證資訊規則，在使用者提交資訊的過程中設定一個Loading的表徵圖等等，本教程僅作拋磚引玉之用了。另外，請注意，後台提交資料給郵箱，我這裡就不再解釋了。打包下載的執行個體中有很詳細的注釋，你需要改動的地方僅僅是使用者名稱和密碼。下載壓縮包之後，你也許會發現裡面有個runonload.js檔案，此檔案的作用是在載入表單檔案時，將焦點聚焦在輸入表單上，僅此而已。