jQuery使用ajaxSubmit()提交表单以及AjaxSubmit的一些用法

一：表单提交的实例

<1>要使用的架包：

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>

<2>表单form实例：

<div id="loginform" class="loginBox">
    <form id="Form1" class="form form-horizontal" action="../Manage/Login" method="post">
      <div class="row cl">
        <label class="form-label col-3"><i class="Hui-iconfont">&#xe60d;</i></label>
        <div class="formControls col-8">
          <input id="account" name="account" type="text" placeholder="账户" class="input-text size-L">
        </div>
      </div>
      <div class="row cl">
        <label class="form-label col-3"><i class="Hui-iconfont">&#xe60e;</i></label>
        <div class="formControls col-8">
          <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-8 col-offset-3">
          <input name="vCode" class="input-text size-L" type="text" placeholder="验证码" οnblur="if(this.value==''){this.value='验证码:'}" οnclick="if(this.value=='验证码:'){this.value='';}" value="验证码:" style="width:150px;">
          <img id="auth" src="../../VerificationCode.jsp" height="40" width="110"> <a id="kanbuq" href="javascript:;">看不清，换一张</a>
        </div>
      </div>
     
      <div class="row">
        <div class="formControls col-8 col-offset-3">
          <input name="" type="submit" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
          <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
        </div>
      </div>
    </form>
  </div>
</div>

<3>上面是一个需要提交内容的form，通常情况下，我们直接通过form提交的话， 提交后当前页面跳转到form的action所指向的页面。然而，很多时候我们比不希望提交表单后页面跳转，那么，我们就可以使用ajaxSubmit(obj)来提交数据。我拿了一个人家的使用方法，这个比较简单易懂，也有一个自己的，先看我借鉴的，如下所示：

$(document).ready(function(){
      $('#Form1').bind('submit', function(){
      var account= $('#account]').val(),
     var password= $('#password').val();
      $(this).ajaxSubmit({         type: 'post', // 提交方式 get/post         url: 'your url', // 需要提交的 url
	 dataType : "json", 数据类型
         data: {
            'account': account,
            'password': password
         },
         success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
            // 此处可对 data 作相关处理
            alert('提交成功！');
         }
         //$(this).resetForm(); // 提交后重置表单
   });
      return false; // 阻止表单自动提交事件
   });
});

再来，看我自己的方法：

$(document).ready(function(){
    $('#Form1').bind('submit', function(){
        ajaxSubmit(this, function(data){
            console.log("返回失败", data);
            if(data.rtnCode=="0000000"){
               window.location.href="../admin/index.html";
            }else{
                layer.msg(data.msg,{icon: 5,time:2000});
            }
        });
        return false;
    });
});

下面的可以写在公共类中，其他的表单提交也完全可以调用，达到代码的复用，如下：

// 将form转为AJAX提交
function ajaxSubmit(frm, fn) {
   var dataPara = getFormJson(frm);
   $.ajax({
      url : frm.action,
      type : frm.method,
      data : dataPara,//可能会出现后台接收到的参数值为null的情况，原因是form.js的源码不全，没有data这个参数，需要重新下载官网的源码。
      dataType : "json",
      async: false,//异步
      success : fn
   });
}

// 将form中的值转换为键值对。
function getFormJson(frm) {
   var o = {};
   var a = $(frm).serializeArray();
   $.each(a, function() {
      if (this.name == "password") {
         this.value = $.md5(this.value)
      }
      if (o[this.name] !== undefined) {
         if (!o[this.name].push) {
            o[this.name] = [ o[this.name] ];
         }
         o[this.name].push(this.value || '');
      } else {
         o[this.name] = this.value || '';
      }
   });
   return o;
}