博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery.form.js使用
阅读量:4950 次
发布时间:2019-06-11

本文共 4391 字,大约阅读时间需要 14 分钟。

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

 

转载于:https://www.cnblogs.com/xsj1989/p/5623604.html

你可能感兴趣的文章
Photoshop制作一只可爱的卡通小鸟
查看>>
EMC产品分析介绍(三):备份领域的引领者DataDomain (2)
查看>>
烂泥:学习ssh之ssh密钥随身携带
查看>>
POSTFIX邮件收发基本原理
查看>>
千万别手欠执行stop slave
查看>>
【VMCloud云平台】拥抱Docker(一)安装
查看>>
《构建高可用Linux服务器(第4版)》已面市
查看>>
IM3.0时代 移动互联网会发生什么变化
查看>>
CocoStudio 1.4.0.1数据编辑器使用
查看>>
2016年互联网电视表现咋样?热闹非凡,喜忧参半
查看>>
[歪谈]运营和技术之间不可调和的“矛盾”
查看>>
Kerberos学习(一)
查看>>
Kubernetes v1.12 二进制部署集群(HTTPS+RBAC)
查看>>
苹果就剩下虚荣了
查看>>
Win8的重点不在PC:触屏+语音+体感+云
查看>>
arm linux 启动过程
查看>>
win7重置密码的方法
查看>>
WinForm界面开发之“分页控件”
查看>>
Zen Coding — a new way of writing HTML and CSS code
查看>>
向Sql Server中导入TXT文本文档
查看>>