【整理】01. jQuery.Form.js 用法分析

时间：2023-03-10 06:21:59
【整理】01. jQuery.Form.js 用法分析

前言：

    1. 为什么使用JQuery.From.js，因为原生<form>表单没有回调函数，不过可以通过jquery-form.js这个插件来实现回调函数。
    2. jQuery.form.js是一个form 插件，支持 ajax表单提交 和 ajax文件上传。
方法：
    1. formSerilize()  用于序列化表单中的数据，并将其自动整理成适合AJAX异步请求的URL地址格式。
    2. clearForm()     清除表单中所有输入值的内容。
    3. restForm        重置表单中所有的字段内容。即，将所有表单中的字段恢复到页面加载时的默认值。
    4. 两个主要的 API：ajaxForm()，ajaxSubmit()。
疑问：
    1. ajaxForm() 与 ajaxSubmit() 的区别：
      1. $("#form1").ajaxForm();  相当于以下两行：
        1
        2
        3
        4
        $("#form1".submit)(function(){
             $("#form1").ajaxSubmit();
             return false;
        })

        也就是说 ajaxFrom()会自动阻止表单提交。而 ajaxSubmit()不会自动阻止表单提交，想阻止表单提交，要自己 return false;

技巧：
    1. 如果希望表单提交完成后不跳转，那么一行简单的代码就能够实现，几乎与不使用表单提交是一样的:
      1
      2
      3
      $("#MailForm").ajaxSubmit(function(message) {
            alert("表单提交已成功!");
      });
      1. 注意:ajaxForm()与 ajaxSubmit() 都可以没有参数或者接受1个参数。该参数既可以是一个回调函数，也可以是一个options对象。该对象功能非常强大，说明如下:
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        var options={
           url:url,         //form 提交数据的地址
           type:type,       //form 提交的方式(method:post/get)
           target:target,   //服务器返回的响应数据显示在元素(Id)号确定
           beforeSubmit:function(), //提交前执行的回调函数
           success:function(),      //提交成功后执行的回调函数
           dataType:null,   //服务器返回数据类型
           clearForm:true,  //提交成功后是否清空表单中的字段值
           restForm:true,   //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
           timeout:6000     //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
        }
    2. 或者，使用 iframe 来防止提交表单时防止页面跳转；
demo：点击按钮，弹出文件上传选择框，选择文件确定后，发送上传请求。
    1. html
      1
      2
      3
      4
      5
      </div> <a id="vip_batch_export_btn" class="easyui-linkbutton" style="width: 70px">导入</a> 
      <form id="upForm" enctype="multipart/form-data" target="uploadIframe" style="position: absolute;left: -9999px;">
          <input id="upfile" type="file" name="uploadExcel"/>
      </form> 
      <iframe id="uploadIframe" src="about:blank" style="display: none;"></iframe>
    2. Javascript
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      VipCar.importVipList = function(){
          var options  = {    
               url:"../vipManager/importVipInfo.do",
               type:'post',
               success:function(data){
                   // ... 
               },
               error: function(xhr,status,msg){
                  // ...
               }
          };    
          $("#upForm").ajaxSubmit(options);
          // 重新添加一下,否则再次上传同名文件可能就不会触发onchange事件.
          var input = '<input id="upfile" type="file" name="uploadExcel" onchange="VipCar.importVipList();"/>';
          $("#upfile").remove();
          $('#upForm').append(input);
      };
注意问题：
    1. 引入js文件，建议 jquery-form.js，紧随 jquery文件之后，之前我中间穿插引入了easyui 导致 ajaxSubmit() 不可用。

相关文章