Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交。 jQuery Form有两个核心方法ajaxForm()和ajaxSubmit(),本文我们重点介绍ajaxSubmit()的应用。
HTML
首先我们载入jquery库和jquery.form.js插件。jquery.form.js插件的官网地址:http://www.malsup.com/jquery/form/
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>
然后,我们在页面的body中加入一个简单的表单代码:
<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="1" checked> 男 <input type="radio"
name="sex" value="2"> 女 </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>
表单中,要求输入姓名、性别和年龄,然后提交到submit.php处理,通常情况下,点击“提交”按钮后,页面会转到submit.php处理表单数据,而我们使用jquery.form插件后,页面并不会跳转,直接完成了一个ajax交互。
jQuery
我们很方便的调用jquery.form插件,利用ajaxSubmit()使得整个表单的ajax提交过程变得非常的简单。
$(function(){
var options = {
beforeSubmit: showRequest, //提交前处理
success: showResponse, //处理完成
resetForm: true,
dataType: 'json'
}; $('#my_form').submit(function() {
$(this).ajaxSubmit(options);
});
}); function showRequest(formData, jqForm, options) {
var uname = $("#uname").val();
if(uname==""){
$("#msg").html("姓名不能为空!");
return false;
} var age = $("#age").val();
if(age==""){
$("#msg").html("年龄不能为空!");
return false;
}
$("#msg").html("正在提交..."); return true;
} function showResponse(responseText, statusText) {
$("#msg").html('提交成功');
var sex = responseText.sex==1?"男":"女";
$("#output").html("姓名:"+responseText.uname+" 性别:"+sex+" 年龄:"+responseText.age);
}
以上代码完成了表单提交前的验证以及提交后的处理。表单数据提交到submit.php后,我们可以根据实际情况通过submit.php检测数据、将数据写入数据库,返回操作结果等等操作,本文不再列出代码。
ajaxSubmit()选项设置
ajaxSubmit()提供了丰富的选项设置,我们根据使用的可能性大小进行列表,以供参考。
属性 | 描述 |
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 |
jquery.form插件还提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我们可以使用表单验证插件和jquery.form插件一起使用,效果更好。
Ajax表单提交插件jquery form的更多相关文章
- ajax表单提交插件jquery.form.js的运用
该插件提交的数据包含上传的图片. 1.先导入jquery.form.js 2.form表单的元素: <form id="form2_form" method="po ...
- jquery插件-表单提交插件-jQuery.Form
1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- jquery表单验证插件 jquery.form.js ------转载
Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...
- jquery表单验证插件 jquery.form.js-转
来自:http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满 ...
- input ,button, textarea 1)使用disabled , 2) 显示值, 3) 表单提交. 4) jquery.form.js ajaxSubmit() 无刷新ajax提交表单.
1.使用disabled input , button textarea 可以 被 禁用, 禁用的效果 : 1) 上面的点击事件无法使用 --- button : 下面的 onclick ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
随机推荐
- codevs2492 上帝造题的七分钟 2
2492 上帝造题的七分钟 2 题目描述 Description XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. "第一分钟,X说,要有数列,于是便给定了一个正整数数列 ...
- Threading Module源码概述(二)
在threading 模块中,提供了列举当前所有子线程的操作.threading.enumerate.这个操作很简单,就是将_active和_limbo中维护的线程集合的信息输出. def enume ...
- Jenkins 五: 构建Ant项目
1. 点击“新建”,在“Item名称”栏输入要构建的项目名,比如“Ant_project”,选择“构建一个自由风格的软件项目”,点击“OK”按钮. 2. 找到“源码管理”-> “Subversi ...
- B - The Suspects -poj 1611
病毒扩散问题,SARS病毒最初感染了一个人就是0号可疑体,现在有N个学生,和M个团队,只要团队里面有一个是可疑体,那么整个团队都是可疑体,问最终有多少个人需要隔离... 再简单不过的并查集,只需要不断 ...
- 使用JAVA与SmartFoxServer来实现游戏服务器概述
SmartFoxServer 是专门为Adobe Flash设计的跨平台socket服务器,让开发者高效地开发多人应用及游戏. 该服务器主要用来创建多玩家游戏.并提供强大的制作工具,各种回合制游戏和实 ...
- SVN server的搭建
当做大的项目是,svn是代码管理的好工具,假设是用自己的server,那么须要搭建SVNserver. Subversion是一款很优秀的svnserver工具,笔者採用VisualSVN serve ...
- poj2239 Selecting Courses --- 二分图最大匹配
匈牙利算法模板题 有n门课程,每门课程可能有不同一时候间,不同一时候间的课程等价. 问不冲突的情况下最多能选多少门课. 建立二分图,一边顶点表示不同课程,还有一边表示课程的时间(hash一下). #i ...
- XTU OJ 1210 Happy Number (暴力+打表)
Problem Description Recently, Mr. Xie learn the concept of happy number. A happy number is a number ...
- Linux cpuinfo 详解
在Linux系统中,如何详细了解CPU的信息呢? 当然是通过cat /proc/cpuinfo来检查了,但是比如几个物理CPU/几核/几线程,这些问题怎么确定呢? 经过查看,我的开发机器是1个物理C ...
- fluentd结合kibana、elasticsearch实时搜索分析hadoop集群日志<转>
转自 http://blog.csdn.net/jiedushi/article/details/12003171 Fluentd是一个开源收集事件和日志系统,它目前提供150+扩展插件让你存储大数据 ...