PHP jQuery Ajax提交與驗證form表單詳解

PHP jQuery Ajax Form 表單提交與驗證執行個體解析，包括建立一個表單 html 頁面、添加 JQuery 代碼、jquery ajax 表單提交、jquery ajax 表單驗證、反饋資訊給使用者。php ajax 表單驗證，php ajax 提交表單，php ajax form 驗證，php ajax 提交 form 。 本執行個體用到 JQuery 類庫本身的函數和功能，所有表單資訊利用 PHPMailer 類庫郵件的形式發送。 1、建立一個表單 html 頁面 表單部分 html 代碼 以下為引用內容：/**** php100.com* 2013-06-28***/<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 ，這和第二點原理類似。否則，無法看到正常的效果。 2、添加 JQuery 代碼 這裡假設你已經從 JQuery 官方網站上下載了JQuery 基庫，然後上傳到了你的 WEB 伺服器，並添加到你要使用的網頁中。 現在建立一個JS檔案 以下為引用內容：/**** php100.com* 2013-06-28***/$(function() { $(".button").click(function() { // 處理表單驗證和交給幕後處理的邏輯 }); }); 第1行的 function() 函數與Jquery 的 document.ready  函數用法和功能相同，都是在 DOM  準備完畢後自動觸發。第2行裡面是一個單擊觸發函數click() ，需要注意的是，在HTML 一頁提交按鈕上需要放置一個名為“button”的Class ，以類比實現submit 提交表單的功能，從第二點我們可以看出，JQuery 可以很好的將結構和邏輯分離。 3、jquery ajax 表單驗證 在實際應用中，這一步是必不可少的。在使用者漏填，錯填某個項目時，及時提示。 以下為引用內容：/**** php100.com* 2013-06-28***/$(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 的值 以下為引用內容：/**** php100.com* 2013-06-28***///擷取id的值 var name = $("input#name").val(); //擷取class序號為1的值 var name = $(".name")[1].val(); 現假設使用者沒有輸入姓名，處理邏輯應該是：首先顯示錯誤，然後將焦點定位在姓名上。 以下為引用內容：/**** php100.com* 2013-06-28***/if (name == "") { //使用者名稱為空白 $("label#name_error").show(); //錯誤提示 $("input#name").focus(); //焦點定位 return false; //返回 }在必填的欄位上驗證時，都必須 return false ，否則會出現必填項未填完即提交的情況。 4、Jquery Ajax 提交表單 這是實現無重新整理提交的核心步驟，通過 ajax 函數來遞交 javascript 從 DOM 中擷取的表單項值，然後非同步提交給幕後處理程式process.php ，並發送Email ，此步緊接在驗證程式之後： 以下為引用內容：/**** php100.com* 2013-06-28***/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 design</p>") .hide() .fadeIn(1500, function() { $('#message').append("<img id='checkmark' src=&' />"); }); } }); return false;核心函數是 .ajax() ，它所起得作用就是使用 POST 方式將已經擷取的表單資訊 dataString 非同步傳送給所定義的後台 PHP url(bin/process.php) 。如果資料成功傳送，它會將一系列我們定義好的資訊返回給使用者。最後 return false ，這樣是為了防止頁面重新載入。 除了返回成功資訊和發送郵件外，我們還可以做其他一些更廣泛的事情。比如，將獲得的資料交由後台指令碼處理時，將資料插入資料庫中，然後再將使用者提交的資訊返回，因為： 首先，擷取表單項的值： 以下為引用內容：/**** php100.com* 2013-06-28***/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 ，如果成功，則會返回成功資訊給使用者： 以下為引用內容：/**** php100.com* 2013-06-28***/$.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=&' />"); }); } }); return false;5、反饋資訊給使用者首先，在資訊提交成功之後，JQuery 會通過以下部分動態替換掉 <div id="contact_form"></div> 中的內容： 以下為引用內容：/**** php100.com* 2013-06-28***/$('#contact_form').html("<div id='message'></div>"); 所以請大家記住，如果你以後需要通過 JavaScript 動態替換掉某個層或者span ，可以使用 Jquery 的 .html 方法實現。其次，有了這個層肯定還不夠，因為裡面還沒有內容，所以，我們還要給id=message的這個層添加一些顯示內容： 以下為引用內容：/**** php100.com* 2013-06-28***/$('#message').html("<h2>連絡方式已成功提交！</h2>") 同樣是動態為 id 為 message 的層添加了一段 html 用於提示。還可以利用 append 方法在 message 層中追加一句： 以下為引用內容：/**** php100.com* 2013-06-28***/.append("<p>We will be in touch soon.</p>") 最後為了表現出提交之後，伺服器處理的動態效果，我們設定了以下特效代碼： 以下為引用內容：/**** php100.com* 2013-06-28***/.hide() //整個層消失 .fadeIn(1500, function() {//在1500毫秒內逐漸出現 //最後再動態追加一個成功表徵圖 $('#message').append("<img id='checkmark' src=&' />"); });