传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验。而这款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表单插件的更多相关文章

  1. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  2. 第一百八十五节,jQuery,Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  3. 知问前端——Ajax提交表单

    本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...

  4. 知问前端——Ajax登录

    本文,将使用Ajax登录. 一.服务器端代码 is_user.php: <?php require 'config.php'; $query = mysql_query("SELECT ...

  5. 知问前端--Ajax

    本节课主要是创建一个问题表,将提问数据通过 ajax 方式提交出去.然后对内容显示进行布局,实现内容部分隐藏和完整显示的功能. 一.Ajax 提问创建一个数据表:question,分别建立:id.ti ...

  6. 第一百八十七节,jQuery,知问前端--cookie 插件,注册成功后生成cookie,显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  7. Ajax表单提交插件jquery form

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

  8. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

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

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

随机推荐

  1. 什么是POJO模式

    1.     什么是POJO POJO的名称有多种,pure old java object .plain ordinary java object 等. 按照Martin Fowler的解释是“Pl ...

  2. java键盘IO

    public class IO { public static void main(String[] args) throws Throwable { ScannerTest(); // testSc ...

  3. 利用SqlServer的作业定时清除过期数据

    有时候我们的数据库中可能会有那么些存放动态数据的表,比如一些每天定时发出的消息通知信息等数据.这些数据我们只需要临时保存,一些老旧的数据需要定时去清除掉,不然时间一长的话单表数据堆积非常严重.导致数据 ...

  4. OSG学习:位置变换节点示例

    osg::PositionAttitudeTransform节点. #include <osgViewer\Viewer> #include <osg\Node> #inclu ...

  5. 2-c语言作业1

    #include<stdio.h> #include<math.h> int main(void) { int money,year; double rate,sun; pri ...

  6. SQL SERVER技术内幕之10 可编程对象

    一.变量 变量用于临时保存数据值,以供在声明它们的同一批处理语句中引用.例如,以下代码先声明一个数据类型为INT的变量@i,再将它赋值为10; DECLARE @i as INT; SET @i = ...

  7. [剑指Offer] 63.数据流中的中位数

    题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值. c ...

  8. window 安装 nvm

    下载地址 https://github.com/coreybutler/nvm-windows/releases 设置淘宝镜像 nvm node_mirror https://npm.taobao.o ...

  9. SQL Server的全局变量

    SQL Service中的全部变量不需要用户参与定义,在任何程序均可随时调用.并且全部变量是以@@开头 全局变量名称 描述 @@CONNECTIONS 返回 SQL Server 自上次启动以来尝试的 ...

  10. RT-thread内核之小内存管理算法

     一.动态内存管理 动态内存管理是一个真实的堆(Heap)内存管理模块,可以在当前资源满足的情况下,根据用户的需求分配任意大小的内存块.而当用户不需要再使用这些内存块时,又可以释放回堆中供其他应用分配 ...