Form插件地址:

官方网站:http://malsup.com/jQuery/form/

翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started

一.准备工作

写一个表单:

<form id="reg" action="123.php" method="post">

<p>
<label for="user">账号:</label>
<input type="text" name="user" class="text" id="user" title="" />
</p>
<p>
<label for="pass">密码:</label>
<input type="password" name="pass" class="text" id="pass" />
</p>

<input type="submit" value="Submit Comment" />

</form>

引入jQuery和Form Plugin Javascript脚本文件:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/form.js"></script>

二.核心方法

form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能。

ajaxForm

预处理将要使用AJAX方式提交的表单,将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象

//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
alert('提交成功!');
});

注意:使用 ajaxForm()方法,会直接实现 ajax 提交。自动阻止了默认行为,而它提交的默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。

ajaxSubmit

立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。 ajaxForm 需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象

//ajaxSubmit()提交方式
$('#reg').submit(function () {
$(this).ajaxSubmit(function () {
alert('提交成功!');
});
return false; //ajaxSubmit不会自动阻止默认提交,需要自行阻止。这里阻止默认直接提交行为
});

注意: ajaxForm()方法,是针对 form 直接提交的, 所以阻止了默认行为。而 ajaxSubmit()方法,由于是针对 submit()方法的,所以需要手动阻止默认行为。而使用了 validate.js 验证插件,那么 ajaxSubmit()比较适合我们。

疑问:ajaxForm()与ajaxSubmit()的区别:

  答案:$("#form1").ajaxForm();  相当于以下两行:

     $("#form1".submit)(function(){

         $("#form1").ajaxSubmit();

       return false;

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

三.可选参数项对象

ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入。可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

target
用server端返回的内容更换指定的页面元素的内容。 这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象, 一个 DOM 元素。
缺省值: null
url
表单提交的地址。
缺省值: 表单的action的值
type
表单提交的方式,'GET' 或 'POST'.
缺省值: 表单的 method 的值 (如果没有指明则认为是 'GET')
beforeSubmit
表单提交前执行的方法。这个可以用在表单提交前的预处理,或表单校验。如果'beforeSubmit'指定的函数返回false,则表单不会被提交。 'beforeSubmit'函数调用时需要3个参数:数组形式的表单数据,jQuery 对象形式的表单对象,可选的用来传递给ajaxForm/ajaxSubmit 的对象。 数组形式的表单数据是下面这样的格式:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

缺省值: null

success
当表单提交后执行的函数。 如果'success' 回调函数被指定,当server端返回对表单提交的响应后,这个方法就会被执行。 responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型).

缺省值: null

dataType
指定服务器响应返回的数据类型。其中之一: null, 'xml', 'script', 或者 'json'. 这个 dataType 选项用来指示你如何去处理server端返回的数据。 这个和 jQuery.httpData 方法直接相对应。 下面就是可以用的选项:

'xml': 如果 dataType == 'xml' 则 server 端返回的数据被当作是 XML 来处理, 这种情况下'success'指定的回调函数会被传进去 responseXML 数据

'json': 如果 dataType == 'json' 则server端返回的数据将会被执行,并传进'success'回调函数

'script': 如果 dataType == 'script' 则server端返回的数据将会在上下文的环境中被执行

缺省值: null

semantic
一个布尔值,用来指示表单里提交的数据的顺序是否需要严格按照语义的顺序。一般表单的数据都是按语义顺序序列化的,除非表单里有一个type="image"元素. 所以只有当表单里必须要求有严格顺序并且表单里有type="image"时才需要指定这个。
缺省值: false
resetForm
布尔值,指示表单提交成功后是否需要重置。
缺省值: null
clearForm
布尔值,指示表单提交成功后是否需要清空。
缺省值: null
iframe
布尔值,用来指示表单是否需要提交到一个iframe里。 这个用在表单里有file域要上传文件时。更多信息请参考 代码示例 页面里的File Uploads 文档。 
缺省值: false
参考代码:
$("#reg").submit(function() {
$(this).ajaxSubmit({
url : "123.php", //设置提交的 url,可覆盖 action 属性
target : "#box", //服务器返回的内容存放在#box里
type : "GET",
dateType : null, //xml,json,script,默认为 null
//clearForm : true, //成功提交后,清空表单
//resetForm : true, //成功提交后,重置表单
data : { //增加额外的数据提交
aaa : 'bbb',
ccc : 'ddd'
},
beforeSubmit : function(formData, jqForm, options){//提交数据之前执行,一般用于数据验证
//如果数据验证不合法,就返回false,不让提交.默认为true
//alert(formData[0].name); //得到传递表单元素的 name
// alert(formData[0].value); //得到传递表单元素的 value
//alert(jqForm[0].user.value); //得到 form 的 jquery 对象
//alert(options.url); //得到目前 options 设置的属性
return true;
},
success : function(responseText,statusText) { //成功时回调
alert(responseText + statusText);
// alert('Thanks for your comment!');
},
error : function(event, errorText, errorType){ //错误时回调
alert(errorText + errorType);
},
});
return false;
});

四.工具方法

form.js 除了提供两个核心方法之外,还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。

//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的 value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()
//清空某个字段
$('#reg #user').clearFields();

jquery.form.js(ajax表单提交)的更多相关文章

  1. 使用Jquery.form.js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

  2. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  3. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  4. jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  5. 使用jquery.form.js的ajaxsubmit方法提交数据的Bug

    周五同事遇到一个很奇怪的问题,调到下班,虽然问题解决了,但是不知道问题的具体原因,回来翻了翻代码,才发现症结所在,下面就分享出来,供遇到同样问题的同行们参考: 先把问题描述一下,做的功能是使用ajax ...

  6. ajax表单提交插件jquery.form.js的运用

    该插件提交的数据包含上传的图片. 1.先导入jquery.form.js 2.form表单的元素: <form id="form2_form" method="po ...

  7. jquery.form.js+jquery.validation.js实现表单校验和提交

      一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...

  8. jQuery ajax表单提交实现局部刷新

    jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...

  9. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

随机推荐

  1. redis实战笔记(1)-第1章 初识Redis

    第1章 初识Redis 注:本书在redis3.0版本的,比如redis3.0以后支持服务端集群.3.0之前只能客户端分片.    本章主要内容 1.Redis与其他软件的相同之处和不同之处 2.Re ...

  2. kmp java implement--转

    http://cs.nyu.edu/~yap/classes/basic/progs/patternMatching/KMP.java /** * @file KMP.java * @synopsis ...

  3. Understanding JVM Internals---不得不转载呀

    http://www.cubrid.org/blog/dev-platform/understanding-jvm-internals/ http://architects.dzone.com/art ...

  4. 帧布局--FrameLayout

    <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" ...

  5. 关于Hall定理的学习

    基本定义 \(Hall\) 定理是二分图匹配的相关定理 用于判断二分图是否存在完美匹配 存在完美匹配的二分图即满足最大匹配数为 \(min(|X|,|Y|)\) 的二分图,也就是至少有一边的点全部被匹 ...

  6. [译]用R语言做挖掘数据《二》

    数据探索 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到程序: ...

  7. [转]Format a ui-grid grid column as currency

    本文转自:https://stackoverflow.com/questions/27747184/format-a-ui-grid-grid-column-as-currency-rc-3-0 Yo ...

  8. Laravel trait的使用

    trait 是在PHP5.4中为了方便代码复用的一种实现方式,但目前我在看的的PHP项目中较少看的有程序员去主动使用这个实现方式,在laravel中有很多 trait 的使用,关于trait 在 la ...

  9. 二、hbase shell工具

    hbase单节点安装请参考: https://www.cnblogs.com/lay2017/p/9944387.html 下文演示hbase shell工具常用的命令,首先启动hbase以及进入sh ...

  10. git 命令合并分支代码

    git 命令合并分支代码 对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤: 1.进入要合并的分支(如开发分支合并到master,则进入master目录) git ...