`
yong7181000
  • 浏览: 31018 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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.editable-select

    7. **集成和使用**:要在项目中使用 `jquery.editable-select`,需要先引入 jQuery 和插件的 JS/CSS 文件,然后对目标 `<select>` 元素应用插件。通常,这可以通过 jQuery 的 `$(document).ready()` 函数来实现。 8...

    jquery.unobtrusive-ajax.rar

    这个库利用数据属性(data-* attributes)和jQuery事件来实现Ajax功能,使得页面的异步更新更加优雅和易于维护。 在传统的Web开发中,Ajax通常需要在JavaScript代码中添加大量细节,而jQuery Unobtrusive Ajax通过...

    .ajaxSubmit方式提交所需要的 jquery-migrate-1.2.1.js 和 ajax.js

    在这个场景中,可能是因为项目中使用了一些在新版本jQuery中不再支持的特性,所以引入了jQuery Migrate来保持代码的正常运行。 2. **Ajax Submit**: `.ajaxSubmit` 是由jQuery Form Plugin提供的一个方法。这个插件...

    jquery学习笔记--1

    在jQuery中,通常使用`.done()`, `.fail()`, `.always()`来处理Ajax请求的成功、失败和完成。 ### 实践案例——jQuery StarterKit 压缩包中的`jquery-starterkit`可能包含一个基础的jQuery项目模板,用于快速搭建...

    jQuery-File-Upload

    在jQuery-File-Upload中,jQuery被用来处理DOM操作和事件绑定,使文件上传变得更加简单。 ### 2. 多文件上传 jQuery-File-Upload支持HTML5的`multiple`属性,允许用户一次选择多个文件进行上传。这极大地提高了用户...

    JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu

    4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 / 个性化图标(依靠...

    jQuery-File-Upload的例子

    在本文中,我们将深入探讨jQuery-File-Upload的核心概念、工作原理以及如何在实际项目中进行应用。 一、jQuery-File-Upload基础 1.1 功能特点 jQuery-File-Upload支持HTML5 File API,具备以下关键特性: - 多文件...

    jquery-uijquery-ui-1.7.3.custom.zip

    jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui

    Aspnet-ASP.NET-Core-2-jQuery-Ajax-Modal-Form.zip

    Core-2-jQuery-Ajax-Modal-Form.zip,使用asp.net core 2 mvc jquery ajax bootstrap model formasp.net-core-2-jquery-ajax-model-form实现模式表单,asp.net是一个开源的web框架,用于使用.net构建现代web应用和服务...

    jquery.unobtrusive-ajax.min.js

    Ajax.BeginForm 提交,需要引用此文件才会执行OnSuccess

    Ajax-jquery-ajaxSubmit.zip

    Ajax-jquery-ajaxSubmit.zip,使用ajax和json轻松提交表单。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...

    前端项目-jquery-serialize-object.zip

    在前端开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本项目"前端项目-jquery-serialize-object"关注的是使用jQuery来序列化表单字段,将它们转换为...

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统.zip

    基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp + servlet + jquery + easy-ui + ajax 的学生成绩管理系统 基于 jsp...

    jquery-1.12.4-jquery.min.js.zip

    在现代网页开发中,jQuery 是一个不可或缺的库,它极大地简化了JavaScript的使用,使得DOM操作、事件处理、动画效果以及Ajax交互变得更加简单易行。"jquery-1.12.4-jquery.min.js.zip"是一个包含jQuery 1.12.4精简版...

    jQuery EasyUI jquery-easyui-1.5.5.6

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列易于使用的组件,帮助开发者快速构建用户界面。这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本,这是一份重要的更新,可能包含了一些...

    jquery-form - jQuery表单生成插件

    在jQuery-form中,你可以轻松实现异步(Ajax)提交表单,避免页面刷新,提升用户体验。它支持多种HTTP方法,包括POST和GET,以及XMLHttpRequest Level 2的PUT、DELETE等。此外,它还兼容各种表单编码类型,如...

    jQuery-File-Upload for asp.net MVC

    《jQuery-File-Upload在ASP.NET MVC中的应用详解》 在Web开发中,文件上传功能是必不可少的一部分,尤其是在用户需要提交图片、文档等文件时。jQuery-File-Upload是一款广泛使用的前端文件上传插件,它提供了优雅的...

    jquery-1.8.0.js+jquery-1.8.0-vsdoc.js

    标题 "jquery-1.8.0.js+jquery-1.8.0-vsdoc.js" 提供的是关于jQuery库的两个关键文件,它们是jQuery 1.8.0版本的核心JavaScript文件和对应的Visual Studio文档文件。在.NET开发环境中,尤其是使用Visual Studio 2008...

    jquery-lightbox-0.5

    "jQuery-lightbox-0.5" 是一个基于JavaScript库jQuery的轻量级图片灯箱插件,主要用于在网页上展示图片,提供优雅的过渡效果和简单的用户交互。这个压缩包包含的是该插件的源代码和其他相关资源,适用于网页设计师和...

    jquery-easyui-1.3.5

    最后,`jquery-easyui-1.3.5`压缩包中的文件可能包括JavaScript库文件(如`jquery.easyui.min.js`)、CSS样式文件(如`easyui.css`)、图像资源文件(如图标)以及可能的示例和文档。开发者解压后可以直接引用这些...

Global site tag (gtag.js) - Google Analytics