JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。
按照作者的解释:
AjaxForm
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数
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
};
示例代码摘自: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
// prepare the form when the DOM is ready
$(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.
// prepare the form when the DOM is ready
$(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.');
}
分享到:
相关推荐
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。
Demo 4 : form插件的使用--ajaxForm()和ajaxSubmit(). Demo 5 : form插件的使用--验证后提交(简单验证). Demo 6 : form插件的使用--验证后提交. Demo 7 : form插件的使用--验证后提交. Demo 8 : form插件的使用-...
本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入。可选参数项对象...
摘要:脚本资源,jQuery,Ajax表单 收集的一些jQuery表单实例,Ajax表单判断,锋利的... Demo 4 : form插件的使用--ajaxForm()和ajaxSubmit(). Demo 5 : form插件的使用--验证后提交(简单验证). Demo 6 : fo
jQuery From有两个主要方法:ajaxForm和ajaxSubmit,它们集合了从控制表单元素到决定如何管理提交进程的功能,这两个方法支持许多充分控制数据提交的参数选项(options)。用Ajax来提交表单,你不可能找到比这个更...
ajaxForm()和ajaxSubmit()方法可以接受0个或1个参数,当为单个参数时,该参数可以是一个回调函数,也可以是一个options对象。以下是一个options对象. var options={ target:'#output1', //把服务器返回内容放入id为...
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: 代码如下:[removed][removed][removed][removed] 那么,如何通过ajaxSubmit(obj)提交数据呢?首先...
本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考,具体如下: 一、jQuery.Form.js 插件的作用...疑问:ajaxForm()与ajaxSubmit()的区别: 答案:$(“#form1”).ajaxForm(); 相当于以下两行: $
废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span xss=removed>function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', ...
下面小编就为大家带来一篇浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Ajax表单提交,用 jquery.form.js SDK 封装好的ajaxSubmit
jquery上传文件和参数封装的js:jquery.form.js,可用于单文件、上文件上传以及携带参数
例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享。 重点: html表格三要素: action=”fileUpload/fileUpload” method=”post” enctype=”multipart/form-data”...
// headers:{"ClientCallMode" : "ajax"},//添加请求头部 enctype="multipart/form-data" success: function(data){ if(data.msg=="success"){ alert("保存成功"); }else{ alert("保存失败")...
需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域 //beforeSubmit: showRequest, // 提交前调用的方法 //
解决办法:使用jquery.form.js 步骤 自定义控制提交函数 var submitChange=function () { $("form").ajaxSubmit(function (message) { alert(message.text); [removed].href="/index" rel="external ...
jquery的一个form插件,通过很简单的ajaxForm和ajaxSubmit两个函数,就可以自动获取指定表单的所有信息并提交,省略手写jquery的ajax函数的繁琐过程。文件里除了这个插件拥有的一些函数外,还包含函数使用的解释代码...
4.2.2版本,ajaxSubmit方法提交不会跳转页面,解决提交时找不到opera的问题。