jquery.form.js使用 - 邢帅杰

公告

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。

示例：

@{
    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：

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 2016-06-28 15:22 邢帅杰阅读(2765) 评论(0) 编辑收藏举报

刷新页面返回顶部