jQuery是一個能夠簡化HTML文檔遍歷和操作、事件處理、動畫設計和Ajax交互的JS庫。easyUI是jQuery的擴展UI庫,提供了許多易于使用的UI組件,如表格、樹形菜單、對話框等等。本文將介紹如何使用jQuery和easyUI實現表單提交。
1.引入jQuery和easyUI庫
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.7.0/themes/icon.css"><script type="text/javascript" src="jquery-easyui-1.7.0/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
2.創建一個表單
<form id="form" method="post"><input class="easyui-textbox" label="用戶名:" name="username" required="true"><input class="easyui-textbox" label="密碼:" type="password" name="password" required="true"><input class="easyui-textbox" label="郵箱:" name="email" validType="email"></form>
3.綁定表單提交事件
<script type="text/javascript">$(function(){ $('#form').form({ url: 'submit.php', onSubmit: function(){ return $(this).form('validate'); }, success:function(data){ $.messager.alert('提示', data, 'info'); } }); // 提交表單 $('#submitBtn').click(function(){ $('#form').submit(); }); }); </script>
在上面的代碼中,我們首先通過form()函數將表單與一個URL地址進行綁定,當表單提交時,會自動將表單數據通過Ajax方式提交到URL指定的服務端程序。同時,在onSubmit事件處理函數中,我們首先使用form('validate')方法進行表單數據的驗證,如果驗證通過,則可以繼續提交,否則表單數據不會被提交。
最后,在success回調函數中,我們通過easyUI的messager組件來彈出一個信息提示框,顯示服務端返回的數據。
4.添加提交按鈕
<a id="submitBtn" class="easyui-linkbutton" iconCls="icon-ok">提交</a>
通過easyUI的linkbutton組件,我們可以輕松地添加一個提交按鈕,并為其綁定點擊事件。
通過上述簡單的步驟,我們就可以使用jQuery和easyUI來實現表單的提交,并且得到服務端返回的結果。對于需要大量使用表單的Web應用程序來說,這種方法可以減少許多手工編寫表單驗證代碼的工作,讓我們更加專注于業務邏輯的實現。