jQuery EasyUI 表單(Form)用法 ajax提交方法

jQuery EasyUI里表單(Form)的用法和jQuery里AJAX的用法差不多，下面介紹一下具體用法：

HTML代碼：

<form id="ff" method="post">
...
</form>

然后按照《jQuery EasyUI框架使用文檔》包含必要文件后，只要在$(function(){ }); 里插入下面的代碼即可：
如果想使表單變成AJAX提交：

$('#ff').form({
        url:...,
        onSubmit: function(){
                // do some check
                // return false to prevent submit;
        },
        success:function(data){
                alert(data)
        }
});

如果想做提交的動作：

$('#ff').form('submit', {
        url:...,
        onSubmit: function(){
                // do some check
                // return false to prevent submit;
        },
        success:function(data){
                alert(data)
        }
});

這兩段代碼之有很小的一個差別就是在設置參數的時候有個”submit”，下面來詳細介紹一下這些參數的用法：
參數：

參數名	類型	描述	默認值
url	字符串	表單提交的地址	null

事件：

事件名	參數	描述
onSubmit	none	提交之前觸發的事件，如果返回false可以防止提交
success	data	表單提交成功的時候觸發

方法：

方法名	參數	描述
submit	options	執行提交的操作，選項的參數是一個對象，這個對象包括以下的屬性： url：設置提交的地址； onSubmit：提交之前的回調函數 submit：提交成功后的回調函數
load	data	加載記錄來填充表單 選項參數可以是一個字符串或者是一個對象，字符串意味着是一個遠程地址，否則就是一個本地的數據記錄
clear	none	清空表單數據
validate	none	表單字段的驗證，如果返回true，則說明所有的字段都是合法的。這個方法可以和validatebox插件聯合使用

------------------------------------------------------------------------------------------------------------------------

下面是一個實例：

easyUI 中通過Ajax提交表單（Submit a form with Ajax）
1. 我們創建一個帶有名稱，電子郵件和電話號碼的示例表單。

2. 通過使用easyui form插件將表單改為Ajax表單。

3. 該表單提交所有字段到后台處理程序，后台處理程序再將這些數據返回到前端頁面，我們接收到這些數據並顯示出來。

創建表單

<div   style="width:230px;background:#E0ECFF;padding:10px;">
 <form id="ff" action="/demo5/ProcessServlet" method="post">
<table>
  <tr>
          <td>Name:</td>
              <td><input name="name" type="text"></input></td>
          </tr>
           <tr>
                <td>Email:</td>
              <td><input name="email" type="text"></input></td>
           </tr>
            <tr>
                <td>Phone:</td>
                    <td><input name="phone" type="text"></input></td>
           </tr>
            <tr>
               <td></td>
                <td><input type="submit" value="Submit"></input></td>
            </tr>
       </table>
    </form>
</div>

將表單改為Ajax表單

我們編寫一些jQuery代碼以使表單可以通過Ajax提交。

注意：success函數在接收到返回數據時觸發，這樣我們就可以處理這些數據了。

$('#ff').form({
    success:function(data){
        $.messager.alert('Info', data, 'info');
    }
});

后台處理程序（其他的框架都是大同小異的）

 

protected void doPost(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
    // TODO Auto-generated method stub
    String name = request.getParameter("name");
        String email = request.getParameter("email");
    String phone = request.getParameter("phone");
    System.out.println(name+":"+email+":"+phone);
    PrintWriter out = response.getWriter();
    out.print("Name:"+name+"<br/>Email:"+email+"<br/>Phone:"+phone);
    out.flush();
    out.close();
    }