jQuery.Form.js 异步提交表单使用总结

前言：

这是我的第三篇技术博文，前两篇目前看来只有7次浏览量，我自己看的好像就占了一半，不过还是要继续下去

正文：

问题：今天使用form表单提交数据的时候遇到一个问题，既想通过form表单提交数据，有想通过ajax的方式异步获取返回值，两者是不是可以同时兼并呢？于是我发现了form.js。既省略了ajax异步加载需要一个一个获取参数值，有解决了form表单不能获取返回值的问题。

第一步：引入jQuery与jQuery.Form.js

1 <script src="jQuery.1.8.3.js" type="text/javascript"></script>
2 <script src="jQuery.Form.js" type="text/javascript"></script>

第二步：示例代码展示

<div id="div1">
    <form id="form1" method="get" action="#">
        <p>
        <label for="name">
            姓名：
        </label>
        <input type="text" name="name" />
        </p>
        <p>
            <label for="age">
                姓名：
            </label>
            <input type="text" name="age" />
        </p>
        <p>
            <label for="country">
                国家：
            </label>
            <input type="checkbox" name="country" value="1" />蜀国
            <input type="checkbox" name="country" value="2" />魏国
            <input type="checkbox" name="country" value="3" />吴国
        </p>
        <p><input type="submit" value="确认" /></p>
    </form>
</div>

第三步如何异步提交代码 js展示：

$(function () {
    $(":submit").click(function () {
        var options = {
            url: "indexAjax.aspx",
            target: "#div2",
            success: function (data) {
                alert(data);
            }
        };
        $("#form1").ajaxForm(options);
    })
})

使用如下：

 $(document).ready(function() { 
                    var options = { 
                        target:        '#output1',   // 用服务器返回的数据 更新 id为output1的内容.
                        beforeSubmit:  showRequest,  // 提交前
                        success:       showResponse,  // 提交后 
                        //另外的一些属性: 
                        //url:       url         // 默认是form的action，如果写的话，会覆盖from的action. 
                        //type:      type        // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
                        //dataType:  null        // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
                        //clearForm: true        // 成功提交后，清除所有的表单元素的值.
                        resetForm: true        // 成功提交后，重置所有的表单元素的值.
                        //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
                        //当请求大于3秒后，跳出请求. 
                        //timeout:   3000 
                    }; 
                 
                    //'ajaxForm' 方式的表单 .
                    $('#myForm').ajaxForm(options);  
                    //或者 'ajaxSubmit' 方式的提交.
                    //$('#myForm').submit(function() { 
                    //    $(this).ajaxSubmit(options); 
                    //    return false; //来阻止浏览器提交.
                    //}); 
                }); 
 
               // 提交前
              function showRequest(formData, jqForm, options) { 
                 // formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
                  var queryString = $.param(formData); //组装数据，插件会自动提交数据
                  alert(queryString); //类似 ： name=1&add=2  
                  return true; 
                } 
 
              //  提交后
            function showResponse(responseText, statusText)  { 
                   alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
             } 

基本完结；

日常总结：

    今天突然想出去创业了，是不是有点异想天开了？今天骑士又输了，裁判真尼玛的操蛋，不过输了又如何，詹皇在我心中已经是宇宙第一了，16年就是了，夺不了冠军又如何，倾尽所有不留遗憾就好了，永远的偶像lbj；