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

喜欢ヅ旅行 2022-06-02 06:45 171阅读 0赞

jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件，它使用方法简单，支持同步和异步两种方式提交。

第一步：引入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>

第二步：HTML示例代码

![复制代码][copycode.gif]

![复制代码][copycode.gif]

第三步：JS代码

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

第四步：后台处理代码

![复制代码][copycode.gif]

string strName = Request["name"];
    string strAge = Request["age"];
    string strCountry = Request["country"];
    Response.Clear();
    Response.Write("姓名：" + strName + ";   年龄：" + strAge + ";   国家：" + strCountry);
    Response.End();

![复制代码][copycode.gif]

## 一、jQuery.Form.js 配置选项options ##

--------------------

<table style="margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; max-width:850px; border-color:silver; word-break:break-word; color:rgb(51,51,51); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:14px"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td align="center" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 选项</td> 
   <td align="center" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 说明</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> url</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 表单提交数据的地址</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> type</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> form提交的方式(method:post/get)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> target</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 服务器返回的响应数据显示在元素(Id)号</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> beforeSerialize: function($form, options)</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 表单数据被序列化之前执行的回调函数，如果在内部return false将终止序列化和提交。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> beforeSubmit: function(arr, $form, options)</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 表单数据被序列化成arr数组，并且在提交前触发的回调函数。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> error</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 提交失败执行的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> success</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 提交成功后执行的回调函数</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> data</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 除了表单数据外，还需要额外提交到服务器的数据</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> iframe</td> 
   <td style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 如果有&lt;input type="file"&gt;是否应该使用iframe来上传文件(对旧版本浏览器而言)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> iframeSrc</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 为&lt;iframe&gt;元素设定src属性值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> iframeTarget</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 如果你想用自己的iframe来上传文件，可以将Id传给这个属性</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> dataType</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 期望服务器返回数据类型</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> clearForm</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 提交成功后是否清空表单中的字段值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> restForm</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> timeout</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> 设置请求时间，超过该时间后，自动退出请求，单位(毫秒)</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> forceSync</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> semantic</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> uploadProgress</td> 
   <td colspan="1" style="margin:0px; padding:3px; border-color:silver; border-collapse:collapse"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 二、可操作函数 ##

--------------------

对于之前的表单，我们输入值，然后序列化整个表单看看

var str = $("#form1").formSerialize(options);
    alert(str);

序列化之后弹出的表单内容如下：

![1.png][]

当然你也可以序列化单一个字段：

var str = $("input[name=name]").fieldSerialize(options);

返回某个字段值：

var str = $('#form1 input[name=name]').fieldValue();

[copycode.gif]: /images/20220602/cf73cd9c3b1644f09f2449a71383f363.png
[1.png]: http://www.mashangpiao.net/upload/image/20160801/6360567319031419678916326.png