常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合。

使用插件实例:

一般的使用方法

<!-- 引入jquery文件 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<!-- form表单 -->
<form id="my_form" action="submit.php" method="post">
<p>姓名:<input type="text" name="uname" id="uname" class="input"></p>
<p>性别:<input type="radio" name="sex" value="" checked> 男 <input type="radio"
name="sex" value=""> 女 </p>
<p>年龄:<input type="text" name="age" id="age" class="input" style="width:50px"></p>
<p style="margin-left:30px"><input type="submit" class="btn" value="提交">
<span id="msg"></span></p>
</form>
<div id="output"></div>
  1. $(function(){
  2. var options = {
  3. beforeSubmit: showRequest, //提交前处理
  4. success: showResponse, //处理完成
  5. resetForm: true,
  6. dataType: 'json'
  7. };
  8. $('#my_form').submit(function() {
  9. $(this).ajaxSubmit(options);
  10. return false;
  11. });
  12. });
  13. function showRequest(formData, jqForm, options) {

      //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]

  $.each(formData,function(i,value){
       if(value.name == "editreason[]"){
           if(value.value == ""){
               Gafin.common.alert("修改原因不能为空","exclamation");
           }
       }
    });

      //jqForm:   jQuery对象,封装了表单的元素

      //options:  options对象

      var queryString = $.param(formData);   //name=1&address=2

      var formElement = jqForm[0];              //将jqForm转换为DOM对象

      var address = formElement.address.value;  //访问jqForm的DOM元素

      return true;  //只要不返回false,表单都会提交,在这里可以对表单元素进行验证

  1. }
  2. function showResponse(responseText, statusText) {
  3. $("#msg").html('提交成功');
  4. var sex = responseText.sex==1?"男":"女";
  5. $("#output").html("姓名:"+responseText.uname+" 性别:"+sex+" 年龄:"+responseText.age);
  6. }

options配置

url Ajax请求将要提交到该url,默认是表单的action属性值
type 指定提交表单数据的方法(method):“GET”或“POST”。默认值:表单的method属性值(如果没有找到默认为“GET”)。
dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:
‘xml’:如果dataType == ‘xml’,将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。
‘json’:如果dataType == ‘json’, 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。。
‘script’:如果dataType == ‘script’, 服务器响应将求值成纯文本。。
默认值:null(服务器返回responseText值)
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。
beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果
“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数
据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值:null
success 表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null
clearForm 表示如果表单提交成功是否清除表单数据。默认值:null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

Form表单插件jquery.form.js的更多相关文章

  1. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

  3. (转)jQuery插件 -- Form表单插件jquery.form.js

    beforeSubmit: validate function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来 ...

  4. jQuery插件 -- Form表单插件jquery.form.js

    http://blog.csdn.net/zzq58157383/article/details/7718956 http://my.oschina.net/i33/blog/77250

  5. 异步提交表单插件jquery.form.min.js的使用实例

    因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...

  6. Form表单插件

    jQuery Form是一个优秀的表单插件,它可以非常容易地,无侵入地升级HTML表单以支持Ajax jQuery Form表单插件的下载地址为 http://jquery.malsup.com/fo ...

  7. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  8. 提交Form表单,submit之前做js判断处理

    效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...

  9. form 表单 和 jQuery HTML / CSS 方法($().html 类似的样式)

    1 有关链接 :http://www.runoob.com/tags/tag-form.html https://www.cnblogs.com/Jxwz/p/4509618.html https:/ ...

随机推荐

  1. Android中半透明Activity效果另法

    Android中的Activity有没有类似于像Windows程序样的窗口式显示呢? 答案当然是有. 下图就是一个窗口式Activity的效果图: 下面就说说实现过程: 首先看看AndroidMani ...

  2. RFID电子标签加工的倒装工艺

    倒装对于半导体封装领域的人员而言,是再熟悉不过的了.一般我们看到的集成电路多数以塑封为主,半导体芯片和外界进行信息沟通的通道,靠的就是集成电路的管脚.如果把集成电路外面的封装去掉,会发现每个集成电路内 ...

  3. Configuring HTTP and HTTPS

    Configuring HTTP and HTTPS .NET Framework (current version)   Other Versions   WCF services and clie ...

  4. BOT、BT、PPP形式介绍(3)

    PPP     20世纪90年代后,一种崭新的融资模式-PPP模式(Public-Private-Partnership,即“公共部门-私人企业-合作”的模式)在西方特别是欧洲流行起来,在公共基础设施 ...

  5. bzoj1178

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1178 看ppt http://wenku.baidu.com/link?url=dJv6LNm ...

  6. bzoj1756 Vijos1083 小白逛公园

    Description 小新经常陪小白去公园玩,也就是所谓的遛狗啦-在小新家附近有一条"公园路",路的一边从南到北依次排着n个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. ...

  7. Day56

    今天干啦啥呢 早上七点起来 天气冷了真起不来啊 再坚持坚持就好了 今天上午九点开始考数据库 我去 大学四年第一次感觉到这样的爽  作弊的爽啊 也没有完全的作弊啦 是开卷考试,反正做的很顺利了. 我和胡 ...

  8. Hadoop 1、在虚拟机上进行 HDFS 安装

    一.准备条件 1.四台Linux虚拟机(1台NameNode节点,1台Secondary节点(Secondary和其中1台DataNode共用),外加2台DataNode) 2.下载Hadoop版本, ...

  9. ffmpeg + sdl -03 简单音频播放器实现

    没办法,工作中遇到了问题. 目前NEC EMMA的架构如下: 从USB读入文件 -> 文件分析并提取Packet中的Payload Data   -> NEC HANDLE AVTrans ...

  10. JavaScript学习笔记之 数组方法一 堆栈 和队列

    数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...