Jquery插件之ajaxForm

Jquery插件之ajaxForm

如今ajax满天飞,作为重点的form自然也受到照顾。

其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行。比如:

    $(function(){
        $(‘#myForm‘).submit(function(){
            $.ajax({
                url:"/WebTest/test/testJson.do",
                data:$(‘#myForm‘).serialize(),
                dataType:"json",
                error:function(data){
                    alert(data);
                },
                success:function(data){
                    alert(data);
                }
            });
        });
    }) 

这样的方式掩盖了form的功能,使它成为了变相的ajax。下面来看看符合form思想的ajaxForm。

ajaxForm:

先下载:http://files.cnblogs.com/china-li/jquery.form.js

两个主要的API:ajaxForm() ajaxSubmit()。

ajaxForm()配置完之后,并不是马上的提交,而是要等submit()事件,它只是一个准备。一般用法:

$(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).submit(function(){return false;});
});

这个是官方的例子,不过他没有最后的提交。提交中返回false,阻止它的默认提交动作,而是用ajax交互。

其中options的属性,重要的解释一下:

target        返回的结果将放到这个target下
url           如果定义了,将覆盖原form的action
type          get和post两种方式
dataType      返回的数据类型,可选:json、xml、script
clearForm     true,表示成功提交后清除所有表单字段值
resetForm     true,表示成功提交后重置所有字段
iframe        如果设置,表示将使用iframe方式提交表单
beforeSerialize    数据序列化前:function($form,options){}
beforeSubmit  提交前:function(arr,$from,options){}
success       提交成功后:function(data,statusText){}
error         错误:function(data){alert(data.message);}   

ajaxSubmit示例:

$(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;
    });
}); 

其中参数配置大同小异。只是ajaxSubmit()可以任何时刻都能提交!

其他的API:

$(‘#myFormId‘).clearForm();
$(‘#myFormId .specialFields‘).clearFields();
$(‘#myFormId‘).resetForm();
var value = $(‘#myFormId :password‘).fieldValue();
var queryString = $(‘#myFormId .specialFields‘).fieldSerialize();

另外,官方有一个进度条的demo,可以参考一下:http://www.malsup.com/jquery/form/progress.html

时间: 2024-10-29 00:46:07

Jquery插件之ajaxForm的相关文章

Jquery插件之ajaxForm ajaxSubmit的理解用法

如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.ajax({ url:"/WebTest/test/testJson.do", data:$('#myForm').serialize(), dataType:"json", error:function(data

Jquery插件之ajaxForm简介

我们平常在使用jQuery异步提交表单的时候,一般都是加载在submit事件中,如下所示: 1 $(document).ready(function(){ 2 $('#myForm').submit(function(){ 3 $.ajax({ 4 url:'www.xxx.com', 5 data:$('#myForm').serialize(), 6 dataType:'json', 7 error:function(data){ 8 alert(data); 9 } 10 success:

Jquery插件之ajaxForm ajaxSubmit的理解用法(转)

我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.ajax({ url:"/WebTest/test/testJson.do", data:$('#myForm').serialize(), dataType:"json", error:function(data){ alert(data); }, success:func

seajs 包装 jquery 插件

包装jquery 插件 define(function (require, exports, moudles) { return function($){插件内容}; }) 使用: seajs.use(['ajaxForm'], function (aj) { aj($);//注册到jquery对象 });

query插件之ajaxForm ajaxSubmit的理解用法

如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如: $(function(){ $('#myForm').submit(function(){ $.ajax({ url:"/WebTest/test/testJson.do", data:$('#myForm').serialize(), dataType:"json", error:function(data

jquery插件-表单提交插件-jQuery.Form

1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSubmit 让我们方便的实现无刷新效果提交表单! http://malsup.com/jquery/form/ https://github.com/malsup这个因该是作者的gitbub,我下载看了一下那个readme文件竟然是 API 2.快速入门 1.引入插件 (方法同jQuery) 2.将表

Jquery 插件学习笔记

Jquery 插件 1表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

12个最新免费的jQuery插件周报#5(2015年)

(06/03/2015 至 13/03/2015)这周收集的12个最好.最新的12个免费jQuery插件 Elastic SVG Sidebar Material Design 弹性SVG侧栏导航,受 Material Design 启发 Animating labels for input form 非常适合于小屏幕的动画浮动标签. jQuery Light Carousel Light Carousel 是一个轻量级的响应式 jQuery carousel轮播. jQuery polygon