jQuery Form Plugin (二) ：使用AJAX提交Form表单
前章介绍了使 用AJAX提交Form表单的方法，其中主要的就是ajaxForm()和ajaxSubmit()，ajaxForm和ajaxSubmit都支持众多 的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：
Options对象的详解：
1.)target
指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。
2.)url
重写或者指定表单的'action'属性。
默认值：表单的action属性值
3.)type
重写或者指定表单的'method' 属性,"GET"或"POST"。
默认值：表单的method属性值（如果没有找到默认为“GET”）。
4.)beforeSubmit
表单提交前被调用的回调函数，该方法通常被提供来运行预提交逻辑或者校验表单数据。如果"beforeSubmit"回调函数返回false，那么表单将 不被提交。"beforeSubmit"回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入 ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默认值：null
5.)success
表单成功提交后调用的回调函数。如果提供"success"回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null
6.)dataType
期望服务器的的回应的类型。null、"xml"、"script"或者"json"其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定，将传回responseXML值
'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。
'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。
默认值：null（服务器返回responseText值）
7.)semantic
布尔标志，表示数据是否必须严格按照语义顺序来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了 type="image"的input元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将 semantic设置为true。
默认值：false
8.)resetForm
布尔标志，表示如果表单提交成功是否进行重置。
默认值：null
9.)clearForm
布尔标志，表示如果表单提交成功是否清除表单数据。
默认值：null
10.)在$.ajax options中用到的元素都可以用在这里:
如：timeout:3000
ajaxSubmit示例代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Jquery</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
<script type="text/javascript">
$().ready(function() {
var options = {
target: '#output2',
beforeSubmit: showRequest,
success: showResponse
};
$('#myForm2').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
// pre-submit callback
/**参数介绍
formData：是一个数组,我们使用$.param来把它转化成字符串显示,form提交的时候该插件可以自动为你转换;
jqForm：是一个jQuery对象，用来封装form元素，访问DOM元素可以这样：var formElement = jqForm[0];
options：就是上面ajaxSubmit()中的Options对象;
**/
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
return true;
}
// post-submit callback
/**参数介绍
responseText：
通常作为html的相应，方法成功回调，XMLHttpRequest对象的responseText属性，
如果Options对象的dataType属性设置'xml'的话，该参数就是XMLHttpRequest对象的responseXML属性，
如果Options对象的dataType属性设置'json' 的话，该参数就是服务器返回的JSON对象 ;
statusText：状态码;
xhr：XMLHttpRequest对象;
$form:;
**/
function showResponse(responseText, statusText, xhr, $form) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText);
}
</script>
</head>
<body>
<form id="myForm2" action="myservlet" method="post">
<div>
<table>
<tr><td>Name:</td><td><input name="Name" type="text" value="MyName2" /></td></tr>
<tr><td>Check:</td><td>
<input type="checkbox" name="Check" value="1" />
<input type="checkbox" name="Check" value="2" />
<input type="checkbox" name="Check" value="3" />
</td></tr>
</table>
<input type="reset" name="resetButton " value="Reset" />
<input type="submit" name="submitButton" value="Submit1" />
</div>
</form>
<div id="output2"></div>
</body>
</html>
转载于:https://www.cnblogs.com/zhangliang0115/archive/2012/02/19/2357995.html
jQuery Form Plugin (二) ：使用AJAX提交Form表单相关推荐
- 表单提交_django 的ajax提交与表单提交记录
好记性不如烂笔头: 据说的ajax提交比表单提交要好,可以不用重新刷新页面: 表单提交:MTV模式 # 局部禁用csrf保护 @csrf_exempt def login(request):if re ...
- 织梦做ajax提交,织梦用ajax提交自定义表单的办法-不跳转
织梦不跳转用ajax提交自定义表单的最新方法亲测可用 1.引入jquery库 织梦自定义表单调用代码代码: 这里的id="btn"的值要和下面ajax代码里#btn值一样 把aja ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModif ...
- form表单提交以及用Jquery实现ajax提交form表单
在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交,每一个input标签都 ...
- 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
- Ajax提交form表单数据
文章目录 前言 一.form表单介绍 1.什么是表单 2.表单form的组成部分 3.表单form的属性 4.表单的同步提交 二.Ajax 提交表单数据 1.监听表单的提交事件 2.阻止表单的默认提交 ...
- 学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
- ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- ajax异步请求——form表单提交 及 表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...
- 利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交 通过serialize() ...
最新文章
- mysql文章浏览计数_高并发文章浏览量计数系统设计
- SD-销售订单中装运点确认
- 我的世界基岩版json_我的世界基岩版1.16
- python中setup函数的用法_python学习之setUp函数和tearDown函数
- 虚存的用法计算机组成原理,5.5虚拟存储器计算机组成原理.pdf
- Hibernate入门(二)——hibernateAPI详解
- python3的文件读写模式
- 9-8 更新 - 2017 Citrix partner webinar PPT及在线观看地址
- 泰勒展开简单直观理解与常用公式
- STM32单片机基础（理论概念知识）
- 3 a 5的c语言表达式,C语言中,赋值表达式：（a=3*5）=4*3,为什么整个表达式的值为1,表达式x=(a=3,6*a)和表达式x=a=3,6*a分别是...
- 苹果Mac怎样清除dns缓存？
- 小游戏“程序猿大战产品*那啥”
- （1）安装Arch系统 - 树莓派Raspberry Pi - Arch Linux（转载）
- Android Studio-unity腾讯TiM(即时通信)使用
- DevJoy 展商大名单+活动剧透！逛开发者游园会，体验沉浸式打 Bug！
- C语言删除字符串的所有尾部空格
- Trac - Trac Download - Trac下载
- 首师大附中科创教育平台 我的刷题记录 0324 99999999海岛帝国：运输资源
- 判断vector中是否存在某元素的多种方法