posts - 609,  comments - 13,  views - 64万
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
jquery.form.js使用

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。

示例：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@{
    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" onclick="SaveIt()" id="btnSub" value="Save it" class="btn btn-success" />
    }
</body>
</html>

 

后台cs：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

 

posted on   邢帅杰  阅读(2767)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
Powered by:
博客园
Copyright © 2025 邢帅杰
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示
SQL AI 助手