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();
}