`
zhanshenny
  • 浏览: 264833 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery中的AjaxForm和AjaxSubmit

阅读更多
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.');
}
分享到:
评论

相关推荐

    ajaxForm和ajaxSubmit 粘贴就可用示例代码

    本文档提供了使用jQuery插件ajaxForm和ajaxSubmit实现表单异步提交(AJAX提交)的示例代码。在了解这部分知识前,我们首先需要了解一些基础知识。 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载...

    ajaxForm异步提交表单(含图片)

    1. **引入jQuery和ajaxForm插件**:确保在HTML文件中引入jQuery库和ajaxForm插件的JavaScript文件。通常,jQuery库可以从CDN获取,而ajaxForm插件可以在其官方网站下载。 2. **HTML表单结构**:创建一个包含图片...

    浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    jQuery.form.js的ajaxForm和ajaxSubmit方法提供了这样的机制。它们可以简化客户端与服务器间的通信流程,提升用户体验。掌握这两者可以让你在开发中更加自如地处理表单数据,同时也使得表单处理更加安全高效。希望...

    JQuery.form表单提交参数详解.txt

    ### JQuery Form 插件中的 `ajaxForm()` 和 `ajaxSubmit()` 方法详解 #### 一、引言 在 Web 开发中,使用 AJAX 进行异步表单提交是一种常见的技术手段,它允许开发者无需重新加载整个页面即可提交数据并接收响应...

    jquery ajaxSubmit提交所用到的jquery.form.js

    除了`ajaxSubmit`,jQuery Form Plugin还提供了`ajaxForm`、`serializeArray`、`serialize`等方法,这些方法同样增强了对表单的处理能力。`ajaxForm`是用于自动绑定表单的提交事件,`serializeArray`和`serialize`...

    jquery form ajax 插件

    1. 初始化插件:在jQuery选择器中调用`ajaxForm`或`ajaxSubmit`方法来初始化插件。例如: ```javascript $("#myForm").ajaxForm(options); ``` 其中,`options`是一个对象,包含了各种配置参数,如成功回调、错误...

    jquery.form.js

    本文将深入探讨jQuery的一个插件——jQuery.form.js,特别是其4.2.2版本中的核心特性:ajaxSubmit方法和ajaxForm方法,以及它们如何解决特定的浏览器兼容性问题。 首先,jQuery.form.js是jQuery的一个扩展插件,它...

    php结合jquery异步上传图片(ajaxSubmit)

    在本文中,我们将深入探讨如何使用PHP和jQuery结合AjaxSubmit实现异步图片上传功能。这个功能在现代Web应用中非常常见,它允许用户无需刷新页面就能上传图片,提高用户体验。 首先,我们需要理解jQuery的AjaxSubmit...

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。

    jQuery使用ajaxSubmit()提交表单示例

    在jQuery中,`ajaxSubmit()` 是一个扩展方法,它包含在jQuery的form插件中,用于异步提交表单数据,而不会导致页面刷新。在使用`ajaxSubmit()` 之前,需要确保已经引入了jQuery库和`jquery.form.js` 插件。以下是对`...

    jQuery中的AjaxSubmit使用讲解

    下面将详细讲解jQuery中的AjaxSubmit的使用方法及其与AjaxForm的区别,以及一些关键选项的设置。 首先,我们需要引入jQuery库以及jQuery Form插件。jQuery Form插件包含了AjaxSubmit和AjaxForm等方法,因此在使用前...

    jquery form jquery.form.js

    2. 初始化表单:通过`$.ajaxForm`或`$("#formId").ajaxSubmit`来绑定表单事件。 ```javascript $("#myForm").ajaxForm({ success: function(response) { console.log('表单提交成功:', response); }, error: ...

    jquery-form.js

    3. **初始化表单**:在jQuery的选择器中找到你的表单元素,然后调用`.ajaxForm()`或`.ajaxSubmit()`方法。例如: ```javascript $('#myForm').ajaxForm({ success: function(response) { // 提交成功后的处理...

    自己写的Jquery form ajax 事例

    这个插件提供了`.ajaxForm()`和`.ajaxSubmit()`两个方法,简化了原本使用`.ajax()`方法实现表单提交的复杂性。 下面是一个基本的使用`$.ajaxForm()`的例子: ```html <!DOCTYPE html> <script src="jquery-...

    使用jQuery.form插件,实现完美的表单异步提交

    此外,`$.fn.ajaxSubmit`方法还可以接受一个完整的jQuery.ajax选项对象,这意味着你可以使用所有jQuery的Ajax选项,如`cache`、`timeout`、`contentType`等,来定制你的异步请求。 总结一下,jQuery.form插件通过...

    jquery+ajaxform+springboot控件实现数据更新功能

    ### 知识点一:JQuery的ajaxForm插件介绍 JQuery的ajaxForm插件是一种用于实现异步提交表单的插件,它能够简化复杂表单的ajax提交过程。通过使用ajaxForm插件,开发者可以无需重写表单数据到AJAX请求体中,而是直接...

Global site tag (gtag.js) - Google Analytics