知问前端——Ajax表单插件
传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js表单的Ajax提交插件将解决这个问题。
一、核心方法
官方网站：http://malsup.com/jquery/form/
form.js插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。
若没有结合其他插件、js、jQuery里的submit()方法时，就用ajaxForm()提交表单。
若用js、jQuery里的submit()方法时，就采用submit()方法。
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知问前端</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="box"></div>
<form id="reg" action="123.html">
<p class="myerror"></p>
<p>账号：<input type="text" name="user" id="user" /></p>
<p>密码：<input type="text" name="pass" id="pass" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
</html>
style.css：
.valid {
background: url(img/reg_succ.png) no-repeat right;
}
.abc {
border: 5px solid green;
}
jQuery代码如下：
$("#reg").ajaxForm(); //ajaxForm自动阻止了默认提交
$("#reg").submit(); //直接跳转
若此时<form>表单修改为：
<form id="reg" method="post" action="add.php">
<p class="myerror"></p>
<p>账号：<input type="text" name="user" id="user" /></p>
<p>密码：<input type="text" name="pass" id="pass" /></p>
<p><input type="submit" value="提交" /></p>
</form>
add.php：
<?php
echo 'add.php';
?>
1.ajaxForm提交方式：
//ajax()中success:function() {}就是这里的function
$("#reg").ajaxForm(function() {
alert("提交成功！");
});
如何证明ajaxForm()中的function就是ajax()中success:function() {}呢？只须将add.php修改为：
<?php
sleep(3);
echo 'add.php';
?>
使其睡眠3秒钟，然后回复给浏览器，成功返回，弹出“提交成功”对话框。
注意：使用ajaxForm()方法，会直接实现ajax提交。自动阻止了默认行为，而它提交的默认页面是form控件的action属性的值，提交的方式是method属性的值。
2.ajaxSubmit()提交方式
使用submit()提交时，由于会直接跳转，即submit()方法没有阻止默认提交，所以需要自行阻止，代码如下：
$('#reg').submit(function () {
....
return false;
});
$("#reg").submit(function() {
$(this).ajaxSubmit(); //达到的效果如同$("#reg").ajaxForm();
$(this).ajaxSubmit(function() { //达到的效果也如同$("#reg").ajaxForm(function() { alert("提交成功！"); });
alert("提交成功！");
}); //执行的也是ajax()中success方法
return false; //submit()方法没有阻止默认提交，需要自行阻止
});
注意：ajaxForm()方法，是针对form直接提交的，所以阻止了默认行为。而ajaxSubmit()方法，由于是针对submit()方法的，所以需要手动阻止默认行为。而使用了validate.js验证插件，那么ajaxSubmit()比较适合我们。
二、option参数
option参数是一个以键值对传递的对象，可以通过这个对象，设置各种Ajax提交的功能。
$("#reg").submit(function() {
$(this).ajaxSubmit({
url:"test.php", //设置提交的url，可覆盖action属性
target:"#box", //服务器返回的内容存放在#box里
type:"get", //GET,POST两种提交方式
dateType:null, //xml,json,script，默认为null，但经测试null和"html"均可用
//clearForm:true, //成功提交后，清空表单
//resetForm:true, //成功提交后，重置表单
data:{
aaa:"bbb" //增加额外的数据提交
},
beforeSubmit: function(formData,jqForm,options) {
//提交之前执行，一般用于数据验证
//alert(options.url); //test.php
//alert(jqForm.html()); //返回<form id="reg"></form>里面的html内容
//alert(formData[0].name); //得到传递表单元素的name，即user
//alert(formData[0].value); //得到传递表单元素的value，即输入的值
//如果数据验证不合法，就返回false，不让提交，返回true让提交，默认返回true
return true;
},
//成功后回调
success:function(responseText,statusText) {
//alert("提交成功！");
alert(responseText + " " + statusText); //为何返回0 [object HTMLDivElement]?，应该返回test.php success
},
//错误时调用
error:function(event,errorText,errorType) {
//alert("错误！");
alert(errorText + " " + errorType); //error Not Found
}
});
return false; //submit()方法没有阻止默认提交，需要自行阻止
});
三、工具方法
form.js除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。
1.表单序列化：
alert($('#reg').formSerialize());
2.序列化某一个字段：
alert($('#reg #user').fieldSerialize());
3.得到某个字段的value值：
alert($('#reg #user').fieldValue());
4.重置表单：
$('#reg').resetForm();
5.清空某个字段：
$('#reg #user').clearFields();
知问前端——Ajax表单插件的更多相关文章
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- 第一百八十五节，jQuery，Ajax 表单插件
jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...
- 知问前端——Ajax提交表单
本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...
- 知问前端——Ajax登录
本文,将使用Ajax登录. 一.服务器端代码 is_user.php: <?php require 'config.php'; $query = mysql_query("SELECT ...
- 知问前端--Ajax
本节课主要是创建一个问题表,将提问数据通过 ajax 方式提交出去.然后对内容显示进行布局,实现内容部分隐藏和完整显示的功能. 一．Ajax 提问创建一个数据表:question,分别建立:id.ti ...
- 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态
jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- jquery.form.js表单插件的使用
jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...
- jQuery插件 -- Form表单插件jquery.form.js<转>
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...
随机推荐
- C语言实验——时间间隔
Description 从键盘输入两个时间点(24小时制),输出两个时间点之间的时间间隔,时间间隔用“小时:分钟:秒”表示. 如:3点5分25秒应表示为--03:05:25.假设两个时间在同一天内,时 ...
- 20145214 《Java程序设计》第7周学习总结
20145214 <Java程序设计>第7周学习总结 教材学习内容总结 时间的度量 格林威治标准时间(GMT),现已不作为标准时间使用,即使标注为GMT(格林威治时间),实际上谈到的的是U ...
- Uva 1600 Patrol Robot (BFS 最短路)
这道题运用的知识点是求最短路的算法.一种方法是利用BFS来求最短路. 需要注意的是,我们要用一个三维数组来表示此状态是否访问过,而不是三维数组.因为相同的坐标可以通过不同的穿墙方式到达. #inclu ...
- 从电梯问题，看c和c++之间的区别（有点懂了）错觉错觉
磕磕碰碰的也相继用c和c++构造了不少的电梯了.虽然对自我的表现不满意,但是总体来说还是有一定的收获的,对于c和c++之间的区别感觉也摸到了一点点门道了... 用c语言构造电梯的步骤: 第一步: 分析 ...
- 3DMAX贴图无法显示
问题描述:我在点击"将材质指定给选定对象"按钮之后,模型只是变灰了,没有显示出我贴的图. 原因是:没有显示贴图. 我的解决方案:点击材质编辑器里面的"视口中显示敏感处理材 ...
- OSG配置失败解决方案
这连续三天都在台式机上配置OSG,总是报各种各样的错. 后来换到笔记本上配置,结果一次性就配置成功了.笔记本和台式机都是WIN10系统,都是VS2013.或许有时候出错就可以换台电脑或者重装系统试试. ...
- node中的__dirname
先说结论:__dirname指的是当前文件所在文件夹的绝对路径. 测试路径如下: 即 根目录/dir0.js 根目录/path1/dir1.js 根目录/paht1/path2/dir2.js 每个d ...
- pythoh使用 xpath去除空格空格
html_str = """ <!DOCTYPE html> <html lang="en"> <head> &l ...
- DDL、DML和DCL的比较【引用学习】
1.DDL 1-1.DDL的概述 DDL(Data Definition Language 数据定义语言)用于操作对象和对象的属性,这种对象包括数据库本身,以 ...
- 在select中，载入时默认select为空白，选项内不显示空白项
有两种办法,一种纯css实现,一种借助js实现. html: <body onload="load()"> <select id="abc" ...