JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
按照作者的解释:
AjaxForm
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
示例代码摘自:http://www.malsup.com/jquery/form/#code-samples
ajaxForm
The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks
$(document).ready(function() {
var options = {
target: '#output1', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#myForm1').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
ajaxSubmit
The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form.
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#myForm2').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
转载于:https://www.cnblogs.com/qiantuwuliang/archive/2009/09/14/1566604.html
JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别相关推荐
- jQuery form插件之ajaxForm()和ajaxSubmit()
代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> < ...
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
- 【读书笔记 | 自动驾驶中的雷达信号处理(第7章 目标滤波与跟踪)】
本文编辑:调皮哥的小助理 大家好,又和大家见面了,时间过得很快,到目前为止,如下面的目录所示,我们已经阅读过汽车雷达目标检测的一些基本的原理了,特别是距离.速度和角度.虽然这些表示瞬时目标状态的信息可 ...
- 读书笔记.:硝烟中的Scrum和XP
读书笔记.:硝烟中的Scrum和XP scrum不能解决问题,解决问题靠开发团队自己 出色的团队最重要的是有良好素质的团队,这些素质包括进取心.责任心.良好的习惯.热情,其次才是技术.流程 scrum ...
- 读书笔记 | 自动驾驶中的雷达信号处理(第2章 雷达方程)
本文编辑:调皮哥的小助理 2.1 介绍 本文主要介绍雷达方程,这有助于理解传播损耗对雷达发射信号的影响.本期的内容都很简单,通俗易懂,即使有存在不易理解的,我会额外加以注释,总而言之,会站在一个初学者 ...
- jQuery学习笔记——jQuery选择器详解种类与方法
jQuery的选择器根据页面中元素的不同,可以分为基本选择器.层次选择器.表单选择器.过滤选择器,而过滤选择器又有简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器和表 ...
- 读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...
- 读书笔记 | 自动驾驶中的雷达信号处理(第9章 汽车雷达的应用概述)
本文编辑:调皮哥的小助理 大家好,我是调皮哥,又和大家见面了,时间过得很快,到目前为止,本次读书笔记的内容是最后一篇了,相信大家通过之前文章的阅读,已经对自动驾驶中的雷达信号处理.雷达数据处理.人工智 ...
- 读书笔记 | 自动驾驶中的雷达信号处理(第8章 雷达目标识别与分类技术)
本文编辑:调皮哥的小助理 大家好,我是调皮哥,又和大家见面了,时间过得很快,到目前为止,本次读书笔记的内容已经快接近尾声了,相信大家通过之前文章的阅读,已经掌握了雷达系统.雷达信号处理.雷达数据处理. ...
最新文章
- 4.22、Bootstrap V4自学之路-----内容---轮播
- wxWidgets:wxVariantDataSafeArray类用法
- ras私钥c#转java_C#RSA对接JAVA中RSA方式代码实例
- c语言调用linux脚本,C语言执行shellcode的五种方法
- 如何删除空文件夹Java_JAVA实现将磁盘中所有空文件夹进行删除的代码
- c语言数据结构将链串里所有值为x的字符删除_redis数据结构与对象到底长什么样?...
- java ee maven_针对新手的Java EE7和Maven项目–第1部分–简单的Maven项目结构–父pom...
- python简体中文、繁体中文转换
- 磁盘碎片整理程序的原理是什么?
- 近来接连换了U盘、剃须刀,京东服务确实好
- PRML_4章 线性模型分类笔记
- DRM2.0 的身份认证过程
- 制作精美失落美女胶片效果
- RTSP支持MPEG-4格式监控
- 什么是云?什么是云服务?什么是云计算?
- 木秀于林,风必摧之;行高于人,众必毁之?
- Autodask_3DMAX安装Failed Installation aborted, Result=1619解决办法
- 红外线测温仪方案开发
- ZSC 1526 独眼贝斯基 (KMP + 优化)
- 虚拟机php安装swoole扩展,Linux下php安装swoole扩展