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

來源:互聯網
上載者:User
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=&' />"); });

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。