一：表单提交的实例

<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"></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"></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)来提交数据。我拿了一个人家的使用方法，这个比较简单易懂，也有一个自己的，先看我借鉴的，如下所示：

            'account': account,
            'password': password},
         success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
            // 此处可对 data 作相关处理
            alert('提交成功！');
         }//$(this).resetForm(); // 提交后重置表单
   });
      return false; // 阻止表单自动提交事件
   });
});

   dataType : "json", 数据类型

         data: {

$(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

再来，看我自己的方法：

$(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;
}

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

jQuery使用ajaxSubmit()提交表单示例（转）
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下: 准备工作: ajaxSubmit(obj)方法是jQuery ...
jQuery使用ajaxSubmit()提交表单示例
jQuery使用ajaxSubmit()提交表单示例 2014-08-26 07:42 | 9975人阅读 | 来源 ajaxSubmit(obj)方法是jQuery的一个插件jquery.form. ...
Jquery.form自动提交表单上传图片
先引入相关js文件 1 2 <script type="text/javascript" src="jquery-1.7.2.min.js">< ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
jquery submit()不能提交表单的解决方法
jquery submit()不能提交表单的解决方法参考文章: (1)jquery submit()不能提交表单的解决方法 (2)https://www.cnblogs.com/war-hzl/p/ ...
html ajax提交表单实例,jQuery使用$.ajax提交表单完整实例
本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: /p> "http://www.w3.org/TR/x ...
jQuery的ajax提交表单
jQuery的ajax提交表单 1.表单 <form id="ff" method="post"><div class="input ...
java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
jQuery使用ajaxSubmit()提交表单
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码代码如下: <script src=&qu ...

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

一：表单提交的实例

<1>要使用的架包：

<2>表单form实例：

再来，看我自己的方法：

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

最新文章

热门文章