專業丈量施工設計窗簾窗飾,包含各種窗簾布
捲簾等,高質感窗簾,樣式齊
辦公室清潔優質油漆工程,各式油漆粉刷專業負責價格合理
免費估價,公道滿意

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 用一個函數ajax處理多個表單的提交

房東:小強
發表時間:2011-06-30
[檢舉]


用 Jquery可以減少很多程式碼,用他來套用提交網站的多個表單更是方便,通常一個網站不會只有一個表單,諸如:登入、登出、註冊、留言….等一些常見的表單,使用Jquery只需一個函數,一個處理請求頁面,即可處理來自不同表單的不同欄位,但是如果使用FCKeditor 做為所見即所得編輯器,則不適用這個方法。

首先,當然你要在首頁檔頭引用Jquery檔案:


<script type="text/javascript" src="js/jquery.js"></script>

假設有三個表單,分別是:

註冊


<form id="regForm">

帳號:<input type="text" size="20" maxlength="12" class="input" id="username" name="username" />

密碼:<input type="password" name="password" id="password" />

電子郵件:<input type="text" size="50" class="input" id="email" name="email" />

<input type="hidden" name="action" id="action" value="reg" />

</form>

<form>

<input type="button" class="okbutton" name="okbutton" id="okbutton" value="註冊" onclick="submitForm(‘#regForm *’)" />

<div id="msg"></div>

</form>

 



登入


<form id="loginForm">

帳號:<input type="text" size="20" maxlength="12" class="input" id="username" name="username" value="" />

密碼:<input name="password" class="input"  type="password" id="password" value=""  />

<input name="autologin" type="checkbox" value="1" checked="checked"  />自動登入       

<a  href="javascript:void(0);" onclick="ajaxpost(‘getpass.php’, ", ‘right’)" >忘記密碼</a>

<input type="hidden" name="action" id="action" value="login" />

</form>

<form>

<input type="button" class="okbutton" name="okbutton" id="okbutton"  value="登入" onclick="submitForm(‘#loginForm *’)" />

<input type="button" name="cancel" id="cancel" value="取消" onclick="ajaxpost(‘mainview.php’, ", ‘right’)" />

<div id="msg"></div>

</form>

登出


<form id="logoutForm">

你確定要登出會員身份嗎?<br />登出後可以以遊客身份繼續瀏覽本站…<br />按『確定』登出

<input type="hidden" name="action" id="action" value="logout" />

</form>

<form>

<input type="button" name="button" id="okbutton" value="確定" onclick="submitForm(‘#logoutForm *’)" />

<input type="button" name="cancel" id="cancel" value="取消" onclick="ajaxpost(‘view.php’, ", ‘right’)" />

<div id="msg"></div>

</form>

你不必管這些表單的內容為何,他們肯定都不一樣,但是,共同的特徵就是表單都分成兩個了,欄位是一個並給于表單的ID,按鈕是另一個,並設定提交的按鈕 type為button而不是submit在表單最後加了一個DIV<div id="msg"></div>,用來顯示請求結果,提交按鈕的onclick事件傳給函數"submitForm(‘#logoutForm *’)"處理,參數(‘#logoutForm *’)表示將ID為logoutForm的所有欄位值帶過去,留意表單ID後面有個星號(*),不管你的網站中有多少表單,都是同樣的作法…提交的表單傳給函數submitForm向伺服器發出請求:

jQuery的AJAX請求


//接收表單的函數

function submitForm(formid){

//在請求未完成前先顯示Loading

$("#msg").html(‘<img src="images/loading.gif" border="0" />’);

  $.ajax({

     url:                "save.php", //處理表單的PHP

     type:        "POST",//表單傳送的方法

  data:        $(formid).serialize(), //這是Jquery的方法,他能將表單欄位串接起來,類似於: single=Single2&multiple=Multiple&multiple=Multiple3&radio=radio2 的方式

     success: function(data){//伺服器傳回的資料

       $("#msg").html(data);//把資料顯示在msg

    }

  });

};

就是這麼簡單,使用Jquery的serialize方法就能將欄位的鍵值組合,組合的順序是依照表單欄為的排列順序而定,到了伺服端就可以依此順序輸入資料庫了。至於伺服端也是一個檔案就能處理全部的資料:

save.php



<?

//啟動Session

Session_start();

//防止IE快取

header("Content-type: text/html; charset=utf-8");

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

header("Cache-Control: no-cache, must-revalidate");

header("ragma: no-cache");

//include資料庫

//include函數庫

//讀取欄位陣列

foreach ( $_POST as $key => $value ){

switch($key){

case ‘username’://驗證用戶名稱


break;

case ‘password’://驗證密碼


break;

case ‘email’://驗證郵件


break;

case ‘message’:


break;

}

}

//註冊

if ($_POST[\'action\']==’reg’) {


}

//登入

if ($_POST[\'action\']==’login’) {


}

//登出

if ($_POST[\'action\']==’logout’) {


}

?>



使用陣列檢查欄位直是否正確,再將欄位值賦予變數組合起來以便寫入資料庫,由於版面關係,PHP分程式碼省略…





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!



  •  共 0 人回應

    姓名:
    佈告內容: