API
ajaxForm | 增加所有需要的事件监听器,为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备。 | 接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。 | $("#formid").ajaxForm(); |
ajaxSubmit | 使用ajax提交表单。 | 接受0个或1个参数。参数可以是一个回调函数,也可以是一个Options对象。 | $("#formid").ajaxSubmit(); 或 $("#formid").submit(function(){ //提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false return false; }); |
formSerialize | 将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 | 无 | var queryString = $("#formid").formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); |
fieldSerialize | 将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,使用这个就很方便了。返回以下格式的字符串:name=value1&name2=value2。 | 无 | var queryString = $("#formid .specialFields").fieldSerialize(); |
fieldValue | 返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效,则数组为空。 | 无 | var pwds = $("#formid :password").fieldValue(); alert('The password is: ' + pwds[0]); |
resetForm | 将表单恢复到初始状态。 | 无 | $("#formid").resetForm(); |
clearForm | 清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。 | 无 | $("#formid").clearForm(); |
clearFields | 清除字段元素。只有部分表单元素需要清除时方便使用。 | 无 | $("#formid .specialFields").clearFields(); |
Options对象
ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。
target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串、一个jquery对象、一个DOM元素。 在请求“成功”并且未设置dataType参数,则将返回的数据replaceWith()或html()掉对象原来的内容,再遍历对象调用success回调函数。 | 默认值:null |
url | 指定提交表单数据的URL。 | 默认值:表单的action属性值 |
type | 指定提交表单数据的方法(method):“GET”或“POST”。 | 默认值:表单的method属性,若无,则为GET |
beforeSubmit | 表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。 回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。 | 默认值:null |
success | 表单成功提交后调用的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。 | 默认值:null |
dataType | 返回的数据类型:null、"xml"、"script"、"json"其中之一。 | 默认值:null |
resetForm | 表示如果表单提交成功是否进行重置。 | 默认值:null |
clearForm | 表示如果表单提交成功是否清除表单数据。 请求成功时触发(同success),并用options. includeHidden做为回调函数参数。 回调函数:$form.clearForm(options.includeHidden); | 默认值:null |
semantic | 布尔值,指示表单元素序列化时是否严格按照表单元素定义顺序。 在序列化只有<input type=”image” />元素会放在序列化字符串的最后,若semantic=true,则会按照它的定义顺序进行序列化。 若你服务器严格要求表单序列化字符串的顺序,则使用此参数进行控制。 | 默认值:false |
data | (对象成员必须包含name和value属性)提供额外数据对象,通过$.param()函数返回序列化后的字符串,稍后会拼接到表单元素序列化的字符串之后。 | |
extraData | (此参数无需外部提供,由内部处理) 此参数是data在进行序列化成字符串之前的一个拷贝,只用于在表单包含<input type=”file” />并且是老浏览器。 因为在老浏览器中文件上传文件我们需要通过<iframe>来模拟异步提交,此时extraData会转变为<input type=”hidden” />元素包含在表单中,被一起提交到服务器。 | |
traditional | 如果你想要用传统的方式来序列化数据,那么就设置为true。 | |
delegation | (适用于ajaxForm)ajaxForm支持Jquery插件的委托方式(需要Jquery v1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,但动态构建的form会在适当的时候调用ajaxSubmit。 | $( '#myForm' ).ajaxForm({ delegation: true , target: '#output' }); |
replaceTarget | (默认:false)与target参数共同起作用,True则执行replaceWirh()函数,false则执行html()函数 | 默认值:false |
includeHidden | 在请求成功后,若设置执行clearForm()函数清空表单元素则会根据includeHidden设置决定如何清空隐藏域元素。 1)传递true,表示清空表单的所有隐藏域元素。 2)传递字符串,表示清空特殊匹配的隐藏域表单元素,eg:$('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域 | |
iframe | 若有文件上传'input[type=file]:enabled[value!=""]',指示是否应该使用<iframe>标签(在支持html5文件上传新特性的浏览器中不会使用iframe模式) | 默认值:false |
iframeTarget | 指定一个现有的<iframe>元素,否则将自动生成一个<iframe>元素以及name属性值。若现有的<iframe>元素没有设置name属性,则会自动生成一个name值 | |
iframeSrc | 为<iframe>元素设定src属性值 | |
beforeSerialize | 提供在将表单元素序列化为字符串之前,处理表单元素的回调函数。 签名:function(form,options) 函数说明:当前表单对象、options参数集合 返回值:返回false,表示终止表单提交操作。 |
注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。
示例:
@{ Layout = null;}JFormTest @using (Html.BeginForm("SaveData", "Home", FormMethod.Post, new { id = "form1" })) { }
后台cs:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace WebApplicationTest.Controllers{ public class HomeController : Controller { public class UserModel { public string name { get; set; } public string mobile { get; set; } } [HttpPost] public ContentResult SaveData(UserModel model) { return Content("My Name:" + model.name + " and My Mobile:" + model.mobile + "!!!"); } public ActionResult JFormTest() { return View(); } }}
参考:
http://www.cnblogs.com/shuang121/archive/2012/04/23/2466647.html
http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html
http://www.cnblogs.com/sydeveloper/p/3754637.html