第七章（插件的使用和写法）（7.2 jQuery 表单插件 ----- Form）

最新推荐文章于 2024-11-04 14:35:43 发布

weixin_30289831

最新推荐文章于 2024-11-04 14:35:43 发布

阅读量110

点赞数

文章标签： php json javascript ViewUI

原文链接：http://www.cnblogs.com/cimuly/p/7242357.html

版权

7.2 jQuery 表单插件 ----- Form

7.2.1 Form 插件简介

jQuery Form 插件是一个优秀的 Ajax 表单插件，可以非常容易地、无侵入地升级 HTML 表单以支持 Ajax。jQuery Form 有两个核心方法----- ajaxForm() 和 ajaxSubmit() 。它们集合了从控制表单元素到决定如何管理提交进程的功能，另外，插件还包括其他一些方法： formToArray() / formSerialize() / fieldSerialize() / clearForm() / clearFields() 和 resetForm() 等等。

7.2.2 下载地址

http://malsup.com/jquery/form/#download

7.2.3 快速上手

首先创建一个 demo.php 的 php 文件

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<h6>{$_REQUEST['name']}</h6>";
?>

HTML 格式

引入jQuery 和 jqueyr.form.js 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{margin: 5px;}
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="lib/jquery.form.js"></script>
</head>
<body>
    <h3> Demo 1 : form插件的使用--ajaxForm(). </h3>
    <form action="demo.php" id="myForm" method="post">
        名称：<input type="text" name="name">  <br>
        地址：<input type="text" name="address">  <br>
        介绍：<textarea name="comment" id="" ></textarea>  <br>
        <input type="submit" id="test" value="提交"> <br> <br>
        <div id="output1" style="display: none;"></div>
    </form>
</body>
</html>

JS 行为：

    <script>
        $(function(){
            // 绑定id为 myForm的表单并提供一个简单的回调函数
            $("#myForm").ajaxForm(function(){
                $("#output1").html("提交成功！欢迎下次再来！").show();
            })
        })
    </script>

如上，当表单提交时，字段的值会以无刷新方式提交到文件 demo.php 中，如果服务器返回一个成功状态，那么用户将看到：提交成功！欢迎下次再来！的提示

7.2.4 核心方法 ----- ajaxForm 和 ajaxSubmit()

如上例所示，通过使用核心方法 ajaxForm() ，能很容易地将表单升级为 Ajax 提交方式

  $(document).ready(function() {  
           $('#myForm').ajaxForm(function() {   
               $('#output1').html("提交成功！欢迎下次再来！").show();    
           });   
   });

Form 插件还有一个核心方法 ajasSubmit() 可以完成同样的功能

    <script>
        $(function(){
            $("#myForm").submit(function(){
                $(this).ajaxSubmit(function(){
                    $("#output1").html("提交成功！欢迎下次再来").show();
                });
                return false;   // 阻止默认表单提交
            })
        })
    </script>

通过调用 ajaxSubmit() 方法来响应用户的提交表单操作，从而使表单的提交方式由传统的提交方式转变为 Ajax 提交方式。

通过 Form 插件的这两个核心方法，都可以在不修改表单的 HTML 代码结构的情况下，轻易地将表单提交方式升级为 Ajax 提交方式。

7.2.5 ajaxForm() 方法和 ajaxSubmit() 方法的参数

ajaxForm() 方法和 ajaxSubmit() 方法都能接受 0个或者 1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个 options 对象。上面例子的参数就是回调函数

下面学习 options 对象，通过给ajaxForm() 方法和 ajaxSubmit() 方法传递 options 对象，使得它们对表单拥有更多的控制权。

创建一个 ajax2 的 PHP 文件

<?php 
    header("Content-Type:text/html; charset=utf-8");
    echo "<h1>{$_REQUEST['name']},{$_REQUEST['address']},{$_REQUEST['comment']}</h1>";
?>

首先定义一个对象 options，然后在对象里设置参数：

var options = { 
                        target:        '#output1',   // 用服务器返回的数据 更新 id为output1的内容.
                        beforeSubmit:  showRequest,  // 提交前回调函数
                        success:       showResponse,  // 提交后回调函数 
                        //另外的一些属性: 
                        //url:       url         // 默认是form的action，如果写的话，会覆盖from的action. 
                        //type:      type        // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
                        //dataType:  null        // 'xml', 'script', or 'json' (接受服务端返回的类型.) 
                        //clearForm: true        // 成功提交后，清除所有的表单元素的值.
                        resetForm: true        // 成功提交后，重置所有的表单元素的值.
                        //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
                        //当请求大于3秒后，跳出请求. 
                        //timeout:   3000 
                    };

定义 options 对象后，就可以把 options 对象传递给 ajaxForm() 方法或者传递给 ajaxSubmit() 方法

 //'ajaxForm' 方式的表单 .
    $('#myForm').ajaxForm(options);  
 //或者 'ajaxSubmit' 方式的提交.
        $('#myForm').submit(function() { 
        　　$(this).ajaxSubmit(options); 
            return false; //来阻止浏览器提交.
        });

在 options 对象中，指定了两个回调函数， beforeSubmit:showRequest 和 success:showResponse

它们分别会在表单提交前和提交后被调用。

beforeSubmit ---- 提交前回调函数

 // 提交前
function showRequest(formData, jqForm, options) { 
 // formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
         var queryString = $.param(formData); //组装数据，插件会自动提交数据
         alert(queryString); //类似 ： name=1&add=2  
         return true; 
}

这个回调函数有3个参数，第一个参数 formdata 是数组对象，使用 $.param() 方法把它转化为字符串，得到的格式： name = 1&address=2

当表单提交时，Form 差件会以 Ajax 方式自动提交这些数据

第二个参数 jqForm 是一个 jQuery 对象，它封装了表单的元素。

如果需要访问 jqForm 的 DOM 元素，可以把 jqForm 转换为 DOM 元素。

var formElement= jqForm[0];
var addree = formElement.address.value;

第三个参数 options 就是 options 对象

在这个回调函数中，只要不返回 false, 表单都将被允许提交；如果返回 false ，则会阻止表单提交，可以利用这个特性，在表单提交之前验证数据。如果不符合规则，则阻止表单提交。

success ------- 提交后的回调函数

function showResponse(responseText, statusText )  { 
                   alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
             }

success 有2个参数，responseText 和 statusText

statusText 只是一个返回状态，例如：success / error 等

参数 responseText 携带着服务器返回的数据内容。responseText 会根据设置的 options 对象中的 dataType 属性来返回相应格式的内容。具体情况如下：

（1）对于缺省的HTML 返回，回调函数的第一个参数是 XMLHttpRequest 对象的 reponseText 属性。

（2）当 dataType 属性被设置为 xml 时，回调函数的第一个参数是 XMLHttpRequest 对象的 responseXML 属性。

例如声明服务器返回数据的类型为xml ，然后以XML 方式解析数据，代码如下：

    $('#xmlForm').ajaxForm({
        dataType: 'xml',
        success: processXml
    });
    function processXml(responseXML){
        var name = $('name',responseXML).text();
        var address = $('address',responseXML).text();
        $('#xmlOut').html(name + " "+address);
    }

（3）当 dataType 属性被设置为 json 时，回调函数的第一个参数是从服务器返回的 json 数据对象。

例如声明服务器返回数据的类型为 json 。然后以 json 方式解析数据。

$('#myForm').ajaxForm({
  dataType : 'json',
  success: processJson
});
function processJson(data){
　　$('#jsonOut').html(data.name + " "+data.address);
}

完整代码：

<script type="text/javascript">
    $(function(){
        var options = { 
                        target:        '#output1',   
                        beforeSubmit:  showRequest,  
                        success:       showResponse, 
                        resetForm: true       
                    }; 
                    $('#myForm').ajaxForm(options); 
    })

          function showRequest(formData, jqForm, options) { 
               
                  var queryString = $.param(formData); 
                  alert(queryString); 
                  return true; 
                } 
 
           
            function showResponse(responseText, statusText , xhr , $form)  { 
                   alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); 
             } 

</script>

效果：依次弹出3个窗口

7.2.6 表单提交之前验证表单

多数情况下，需要在表单提交前对表单元素的值进行一次验证，如果不符合验证规则，则阻止表单提交。

beforeSubmit 会在表单提交前被调用，如果 beforeSubmit 返回 false,则会阻止表单提交，利用这个特性，就可以轻松地完成验证表单元素的任务。

首先定义一个 validate 回调函数，把它设置为 beforeSubmit 的值。

beforeSubmit:validate

然后编写 validate 函数，有3个参数

function validate(formDate, jqForm , options){
   // 这里需要对表单匀速进行验证，如果不符合规则，将返回false 阻止提交   
    
    var queryString - $.param(formData);  // 组装数据
    return true;
}

通过获取表单元素的值，对表单元素进行验证，Form 插件获取表单数据的方式有多种，以下讲解其中3种方式：

♠ 方式1 ：利用参数 formData

参数 formData 是一个数组对象，其中的每个对象都是有名称和值。数据格式如下

[
  {name: name , value:nameValue },
  {name: password , value:passwordValue }
]

由于是数组，因此可以根据循环来获取每个元素的值，然后判断元素的值是否符合验证规则（这里只判断元素是否为空），如果有一项不符合验证规则，就返回 false ，来阻止表单提交，代码如下：

function validate(formData, jqForm, options) { 
    // formdata是数组对象,每个对象拥有名称和值.
     // 数据如下面的格式：
     // [ 
    //     { name:  username , value: usernameValue }, 
     //     { name:  password , value: passwordValue } 
     // ] 
    for (var i=0; i < formData.length; i++) { 
         if (!formData[i].value) { 
            alert('用户名,地址和自我介绍都不能为空!'); 
             return false; 
        } 
    } 
        var queryString = $.param(formData); //组装数据
          //alert(queryString); //类似 ： name=1&add=2  
                 return true; 
    }

♠ 方式2 ：利用参数 jqForm

不仅可以利用第1个参数 formData 来获取表单数据，而且可以利用第2个参数 jqForm 来打到同样的效果。

参数 jqForm 是一个 jQuery 对象，它封装了表单的元素，如果需要访问 jqForm 的DOM 元素，可以把 jqForm 转为 DOM 对象。

var  form = jqForm[0];

然后通过 form.name.value 来获取用户名的值；通过 form.address.value 来获取地址的值。

function validate(formData, jqForm, options) { 
     //jqForm 是一个jQuery对象， 他包装了表单的dom元素. 
    var form = jqForm[0]; //把表单转化为dom对象
    if (!form.name.value || !form.address.value) { 
        alert('用户名和地址不能为空，自我介绍可以为空！'); 
        return false; 
     } 
    var queryString = $.param(formData); //组装数据
        //alert(queryString); //类似 ： name=1&add=2  
        return true; 
}

♠ 方式3 ：利用 fieldValue() 方法

fieldValue() 方法会把匹配元素的值插入到数组中，然后返回这个数组。如果表单元素的值被判定无效，则数组为空，否则数组将包含一个或多个元素的值，由于返回的是一个数组，而不是一个jQuery 对象，因此不能进行链式操作。

利用 fieldValue() 方法，也能很容易地获取到表单元素的值，例如可以通过 $('input[name=address]').fieldValue() 来获取 name 为 “address”的<input>元素的值的数组集合。然后通过数组下标来获取数组中对应的值：

function validate(formData, jqForm, options) {  
      // fieldValue 是表单插件的一个方法，它能找出表单中的元素的值，返回一个集合。
    var usernameValue = $('input[name=name]').fieldValue(); 
        var addressValue = $('input[name=address]').fieldValue(); 
                
    if (!usernameValue[0] || !addressValue[0]) { 
        alert('用户名和地址不能为空，自我介绍可以为空！'); 
        return false; 
    } 
    var queryString = $.param(formData); //组装数据
        //alert(queryString); //类似 ： name=1&add=2  
        return true; 
}