| 客戶口碑推薦，優質搬家服務 線上免費估價，搬家首選 |  | 廢棄物處理、服務優先、價廉實惠 配合度高，歡迎來電詢價 |
| 客戶口碑推薦，優質搬家服務 線上免費估價，搬家首選 | | 廢棄物處理、服務優先、價廉實惠 配合度高，歡迎來電詢價 |
[JQuery] 用一個函數ajax處理多個表單的提交 |
| 房東：小強  發表時間：2011-06-30 | [檢舉] |
|
用 Jquery可以減少很多程式碼，用他來套用提交網站的多個表單更是方便，通常一個網站不會只有一個表單，諸如：登入、登出、註冊、留言….等一些常見的表單，使用Jquery只需一個函數，一個處理請求頁面，即可處理來自不同表單的不同欄位，但是如果使用FCKeditor 做為所見即所得編輯器，則不適用這個方法。 <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向伺服器發出請求： //接收表單的函數 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方法就能將欄位的鍵值組合，組合的順序是依照表單欄為的排列順序而定，到了伺服端就可以依此順序輸入資料庫了。至於伺服端也是一個檔案就能處理全部的資料： <? break; break; break; break; } } } 使用陣列檢查欄位直是否正確，再將欄位值賦予變數組合起來以便寫入資料庫，由於版面關係，PHP分程式碼省略… |
廣利不動產-新板特區指名度最高、值得您信賴的好房仲 您的托付,廣利用心為您服務 廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲 完整房訊，房屋、店面熱門精選物件，廣利不動產 優質仲介，房屋租賃、買賣資訊透明，交易真安心！ |