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;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>JFormTest</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
<script type="text/javascript">
function SaveIt() {
var options = {
target: '#div_result', // 把服务器返回的内容放入id为output的元素中
beforeSubmit: ValiData, // 提交前的回调函数
success: DoResult, // 提交后的回调函数
// url : url, //默认是form的action,如果申明,则会覆盖
// type : type, // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
// dataType : null, // html(默认)、xml、script、json接受服务器端返回的类型
// clearForm : true, // 成功提交后,清除所有表单元素的值
// resetForm : true, // 成功提交后,重置所有表单元素的值
timeout: 3000 // 限制请求的时间,当请求大于3秒后,跳出请求
}
debugger;
//$("#ajaxForm").ajaxForm(function () {
// alert("提交成功1");
//});
//$("#ajaxForm").submit(function () {
// $(this).ajaxSubmit(function () {
// alert("提交成功1");
// });
// return false;
//});
//$("#btnSub").click(function () {
// $("#ajaxForm").ajaxSubmit(function () {
// alert("提交成功2");
// });
// return false;
//});
// ajaxForm
//$("#form1").ajaxForm(options);
// ajaxSubmit
$("#form1").ajaxSubmit(options);
}
function ValiData(formData, jqForm, options) {
debugger;
// formData: 数组对象,提交表单时,form插件会以ajax方式自动提交这些数据,格式如[{name:user,value:val},{name:pwd,value:pwd}]
// jqForm: jQuery对象,封装了表单的元素
// options: options对象
var queryString = $.param(formData); // name=1&address=2
var formElement = jqForm[0]; // 将jqForm转换为DOM对象
var address = formElement.name.value; // 访问jqForm的DOM元素
alert("提交成功 ValiData");
return true; // 只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}
function DoResult(responseText, statusText) {
debugger;
// dataType=xml
//var name = $("name", responseXML).text();
//var address = $("address", responseXML).text();
//$("#xmlout").html(name + " " + address);
dataType=json
//$("#jsonout").html(data.name + " " + data.address);
alert("提交成功 DoResult:" + responseText);
}
</script>
</head>
<body>
@using (Html.BeginForm("SaveData", "Home", FormMethod.Post, new { id = "form1" }))
{
<div id="div_result"></div>
<br />
<input type="text" name="name" value="jay" class="text text-left" />
<br />
<input type="text" name="mobile" value="15221098952" class="text text-left" />
<br />
<input type="button" οnclick="SaveIt()" id="btnSub" value="Save it" class="btn btn-success" />
}
</body>
</html>
后台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