JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
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插件ajaxForm和ajaxSubmit实现表单异步提交(AJAX提交)的示例代码。在了解这部分知识前,我们首先需要了解一些基础知识。 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载...
1. **引入jQuery和ajaxForm插件**:确保在HTML文件中引入jQuery库和ajaxForm插件的JavaScript文件。通常,jQuery库可以从CDN获取,而ajaxForm插件可以在其官方网站下载。 2. **HTML表单结构**:创建一个包含图片...
jQuery.form.js的ajaxForm和ajaxSubmit方法提供了这样的机制。它们可以简化客户端与服务器间的通信流程,提升用户体验。掌握这两者可以让你在开发中更加自如地处理表单数据,同时也使得表单处理更加安全高效。希望...
### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中,使用 AJAX 进行异步表单提交是一种常见的技术手段,它允许开发者无需重新加载整个页面即可提交数据并接收响应...
除了`ajaxSubmit`,jQuery Form Plugin还提供了`ajaxForm`、`serializeArray`、`serialize`等方法,这些方法同样增强了对表单的处理能力。`ajaxForm`是用于自动绑定表单的提交事件,`serializeArray`和`serialize`...
1. 初始化插件:在jQuery选择器中调用`ajaxForm`或`ajaxSubmit`方法来初始化插件。例如: ```javascript $("#myForm").ajaxForm(options); ``` 其中,`options`是一个对象,包含了各种配置参数,如成功回调、错误...
本文将深入探讨jQuery的一个插件——jQuery.form.js,特别是其4.2.2版本中的核心特性:ajaxSubmit方法和ajaxForm方法,以及它们如何解决特定的浏览器兼容性问题。 首先,jQuery.form.js是jQuery的一个扩展插件,它...
在本文中,我们将深入探讨如何使用PHP和jQuery结合AjaxSubmit实现异步图片上传功能。这个功能在现代Web应用中非常常见,它允许用户无需刷新页面就能上传图片,提高用户体验。 首先,我们需要理解jQuery的AjaxSubmit...
jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。
在jQuery中,`ajaxSubmit()` 是一个扩展方法,它包含在jQuery的form插件中,用于异步提交表单数据,而不会导致页面刷新。在使用`ajaxSubmit()` 之前,需要确保已经引入了jQuery库和`jquery.form.js` 插件。以下是对`...
下面将详细讲解jQuery中的AjaxSubmit的使用方法及其与AjaxForm的区别,以及一些关键选项的设置。 首先,我们需要引入jQuery库以及jQuery Form插件。jQuery Form插件包含了AjaxSubmit和AjaxForm等方法,因此在使用前...
2. 初始化表单:通过`$.ajaxForm`或`$("#formId").ajaxSubmit`来绑定表单事件。 ```javascript $("#myForm").ajaxForm({ success: function(response) { console.log('表单提交成功:', response); }, error: ...
3. **初始化表单**:在jQuery的选择器中找到你的表单元素,然后调用`.ajaxForm()`或`.ajaxSubmit()`方法。例如: ```javascript $('#myForm').ajaxForm({ success: function(response) { // 提交成功后的处理...
这个插件提供了`.ajaxForm()`和`.ajaxSubmit()`两个方法,简化了原本使用`.ajax()`方法实现表单提交的复杂性。 下面是一个基本的使用`$.ajaxForm()`的例子: ```html <!DOCTYPE html> <script src="jquery-...
此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...
### 知识点一:JQuery的ajaxForm插件介绍 JQuery的ajaxForm插件是一种用于实现异步提交表单的插件,它能够简化复杂表单的ajax提交过程。通过使用ajaxForm插件,开发者可以无需重写表单数据到AJAX请求体中,而是直接...