zoukankan      html  css  js  c++  java
  • 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: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; 
        }); 
    }); 
    

      

    其他的API: 

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

      

  • 相关阅读:
    CSS3 target伪类简介
    不用position,让div垂直居中
    css3 在线编辑工具 连兼容都写好了
    a标签伪类的顺序
    oncopy和onpaste
    【leetcode】1523. Count Odd Numbers in an Interval Range
    【leetcode】1518. Water Bottles
    【leetcode】1514. Path with Maximum Probability
    【leetcode】1513. Number of Substrings With Only 1s
    【leetcode】1512. Number of Good Pairs
  • 原文地址:https://www.cnblogs.com/rnckty/p/4094229.html
Copyright © 2011-2022 走看看