zoukankan      html  css  js  c++  java
  • jquery.form.js(ajax表单提交)

    Form插件地址:

    官方网站:http://malsup.com/jQuery/form/

    翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started

    一.准备工作

    写一个表单:

    <form id="reg" action="123.php" method="post">

    <p>
    <label for="user">账号:</label>
    <input type="text" name="user" class="text" id="user" title="" />
    </p>
    <p>
    <label for="pass">密码:</label>
    <input type="password" name="pass" class="text" id="pass" />
    </p>

    <input type="submit" value="Submit Comment" />

    </form>

    引入jQuery和Form Plugin Javascript脚本文件:

    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/form.js"></script>

    二.核心方法

    form.js 插件有两个核心方法:ajaxForm()和 ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能。

    ajaxForm

    预处理将要使用AJAX方式提交的表单,将所有需要用到的事件监听器添加到其中。它不是提交这个表单。 在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象

    //ajaxForm 提交方式  
    $('#reg').ajaxForm(function () {  
    alert('提交成功!');  
    }); 

    注意:使用 ajaxForm()方法,会直接实现 ajax 提交。自动阻止了默认行为,而它提交的默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。

    ajaxSubmit

    立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。 ajaxForm 需要零个或一个参数。唯一的一个参数可以是一个回调函数或者是一个可选参数对象

    //ajaxSubmit()提交方式  
    $('#reg').submit(function () {  
    $(this).ajaxSubmit(function () {  
    alert('提交成功!');  
    });  
    return false;  //ajaxSubmit不会自动阻止默认提交,需要自行阻止。这里阻止默认直接提交行为
    });  

    注意: ajaxForm()方法,是针对 form 直接提交的, 所以阻止了默认行为。而 ajaxSubmit()方法,由于是针对 submit()方法的,所以需要手动阻止默认行为。而使用了 validate.js 验证插件,那么 ajaxSubmit()比较适合我们。

    疑问:ajaxForm()与ajaxSubmit()的区别:

      答案:$("#form1").ajaxForm();  相当于以下两行:

         $("#form1".submit)(function(){

             $("#form1").ajaxSubmit();

           return false;

           })  //也就是说ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;

    三.可选参数项对象

    ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入。可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

    target
    用server端返回的内容更换指定的页面元素的内容。 这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象, 一个 DOM 元素。
    缺省值: null
    url
    表单提交的地址。
    缺省值: 表单的action的值
    type
    表单提交的方式,'GET' 或 'POST'.
    缺省值: 表单的 method 的值 (如果没有指明则认为是 'GET')
    beforeSubmit
    表单提交前执行的方法。这个可以用在表单提交前的预处理,或表单校验。如果'beforeSubmit'指定的函数返回false,则表单不会被提交。 'beforeSubmit'函数调用时需要3个参数:数组形式的表单数据,jQuery 对象形式的表单对象,可选的用来传递给ajaxForm/ajaxSubmit 的对象。 数组形式的表单数据是下面这样的格式:
    [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
    缺省值: null
    success
    当表单提交后执行的函数。 如果'success' 回调函数被指定,当server端返回对表单提交的响应后,这个方法就会被执行。 responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型).

    缺省值: null

    dataType
    指定服务器响应返回的数据类型。其中之一: null, 'xml', 'script', 或者 'json'. 这个 dataType 选项用来指示你如何去处理server端返回的数据。 这个和 jQuery.httpData 方法直接相对应。 下面就是可以用的选项:

    'xml': 如果 dataType == 'xml' 则 server 端返回的数据被当作是 XML 来处理, 这种情况下'success'指定的回调函数会被传进去 responseXML 数据

    'json': 如果 dataType == 'json' 则server端返回的数据将会被执行,并传进'success'回调函数

    'script': 如果 dataType == 'script' 则server端返回的数据将会在上下文的环境中被执行

    缺省值: null

    semantic
    一个布尔值,用来指示表单里提交的数据的顺序是否需要严格按照语义的顺序。一般表单的数据都是按语义顺序序列化的,除非表单里有一个type="image"元素. 所以只有当表单里必须要求有严格顺序并且表单里有type="image"时才需要指定这个。
    缺省值: false
    resetForm
    布尔值,指示表单提交成功后是否需要重置。
    缺省值: null
    clearForm
    布尔值,指示表单提交成功后是否需要清空。
    缺省值: null
    iframe
    布尔值,用来指示表单是否需要提交到一个iframe里。 这个用在表单里有file域要上传文件时。更多信息请参考 代码示例 页面里的File Uploads 文档。 
    缺省值: false
    参考代码:
    $("#reg").submit(function() {
            $(this).ajaxSubmit({
                url : "123.php",  //设置提交的 url,可覆盖 action 属性
                target : "#box",  //服务器返回的内容存放在#box里 
                type : "GET", 
                dateType : null, //xml,json,script,默认为 null
                //clearForm : true, //成功提交后,清空表单 
                //resetForm : true, //成功提交后,重置表单  
                data : { //增加额外的数据提交  
                    aaa : 'bbb',  
                    ccc : 'ddd'
                },
                beforeSubmit : function(formData, jqForm, options){//提交数据之前执行,一般用于数据验证
                    //如果数据验证不合法,就返回false,不让提交.默认为true
                    //alert(formData[0].name); //得到传递表单元素的 name  
                    // alert(formData[0].value); //得到传递表单元素的 value  
                    //alert(jqForm[0].user.value); //得到 form 的 jquery 对象  
                    //alert(options.url);  //得到目前 options 设置的属性  
                    return true;
                },
                success : function(responseText,statusText) {   //成功时回调
                    alert(responseText + statusText);
                    // alert('Thanks for your comment!');   
                },
                error : function(event, errorText, errorType){    //错误时回调
                    alert(errorText + errorType);
                },
            });
            return false;
        });

    四.工具方法

    form.js 除了提供两个核心方法之外,还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。

    //表单序列化
    alert($('#reg').formSerialize());
    //序列化某一个字段
    alert($('#reg #user').fieldSerialize());
    //得到某个字段的 value 值
    alert($('#reg #user').fieldValue());
    //重置表单
    $('#reg').resetForm()
    //清空某个字段
    $('#reg #user').clearFields();
  • 相关阅读:
    c++ primer 中讲的顶层const 和 底层 const 理解
    github 0 学习
    MySQL 0 学习
    c++11 move构造函数和move operator 函数 学习
    c++11 多线程 1
    c++ 多线程 0
    学习 emplace_back() 和 push_back 的区别 emplace_back效率高
    crontab执行脚本失败问题
    lucene 排序
    maven 内置变量
  • 原文地址:https://www.cnblogs.com/forfly/p/7464684.html
Copyright © 2011-2022 走看看