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

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

這里，我們只展示主要的表單部分HTML結構代碼：

幾點注意：

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




第二步，開始添加JQuery代碼

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

現在另外新建一個JS文件，添加如下代碼：

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

在實際應用中，這一步是必不可少的。在用戶漏填，錯填某個項目時，及時提示。

幾點注意：
第2行，我們添加一個$('.error').hide()是為了在用戶未輸入任何信息時隱藏三個class="error"提示錯誤的label標簽。而只有當出現錯誤，即為空時，錯誤才會出現。（因為有return false的作用，每次僅會出現一個錯誤）
在JQuery里面，獲取DOM中某個ID或者Class的值非常簡單

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

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

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

首先，獲取表單項的值，方法我們已經在第三步中提到過了：
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函數的功能就只有這些了，如果你需要進一步關于ajax函數的信息，可以參考官方文檔：jQuery's documentation on the ajax function
第五步，反饋信息給用戶的部分

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

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

最新評論