zoukankan      html  css  js  c++  java
  • jQuery学习笔记(jquery.form插件)

    官网: http://malsup.com/jquery/form/

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

    1. 核心方法 -- ajaxForm() 和 ajaxSubmit()

    首先要引用两个脚本文件:

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

    然后,在脚本中用下面两段代码中的任意一个:

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

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

    注意:ajaxSubmit()时,需要加入return false行阻止表单默认提交,否则表单将提交再次。

    一直不知道ajaxForm()与ajaxSubmit()方法具体有何差异,应用时应当注意什么,有知道的朋友希望告诉我。

    2. ajaxForm() 和 ajaxSubmit() 参数

     ajaxForm() 和 ajaxSubmit()都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权。

    $(document).ready(function() { 
        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 
        }; 
     
        //'ajaxForm' 方式的表单 .
        $('#myForm').ajaxForm(options);  
        //或者 'ajaxSubmit' 方式的提交.
        //$('#myForm').submit(function() { 
        //    $(this).ajaxSubmit(options); 
        //    return false; //来阻止浏览器提交.
        //}); 
    }); 
    
    // 提交前
    function showRequest(formData, jqForm, options) { 
        // formdata是数组对象,在这里,我们使用$.param()方法把他转化为字符串.
        var queryString = $.param(formData); //组装数据,插件会自动提交数据
        alert(queryString); //类似 : name=1&add=2  
        return true; 
    } 
    
    // 提交后
    function showResponse(responseText, statusText , xhr , $form)  { 
       alert('状态: ' + statusText + '
     返回的内容是: 
    ' + responseText); 
    } 

    表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

    3. 处理服务器返回类型

    下面是是个完整示范,分别解析从服务器返回html/json/xml数据。

    前台demo8.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="../../js/jquery.js" type="text/javascript"></script>
    <script src="../../js/jquery.form.js" type="text/javascript"></script>
    <script type="text/javascript">           
    // json
    $(document).ready(function() { 
        $('#myForm').ajaxForm({ 
            // 声明 服务器返回数据的类型.
            dataType:  'json', 
            success:   processJson 
        }); 
    });
    
    function processJson(data) { 
        // 'data'是一个json对象,从服务器返回的.
        $('#jsonOut').html(data.name +  "   "+data.address + "  "+data.comment); 
    }
    
    // xml 
    $(document).ready(function() { 
        $('#xmlForm').ajaxForm({ 
            // 声明 服务器返回数据的类型.
            dataType:  'xml', 
            success:   processXml 
        }); 
    });    
    
    function processXml(responseXML) { 
        // 'responseXML' 是一个XML的文档 ,从服务器返回的.
        var name = $('name', responseXML).text(); 
        var address = $('address', responseXML).text(); 
        var comment = $('comment', responseXML).text(); 
        $('#xmlOut').html(name +  "   "+address + "  "+comment); 
    }
    
    // html 
    $(document).ready(function() { 
        $('#htmlForm').ajaxForm({ 
            // 用服务器返回的数据 更新 id为 htmlcssrain 的内容.
            target: '#htmlOut', 
            success: function() { 
                $('#htmlOut').fadeIn('slow'); 
            } 
        }); 
    });
    </script>
    </head>
    <body>
    <h3> Demo 8 : form插件的使用--dataType的其他方式. </h3>
    <!-- demo1 json-->
    <h4>json方式返回</h4>
    <form id="myForm" action="json.jsp" method="post">
      名称:
      <input type="text" name="name" id="name" />
      <br/>
      地址:
      <input type="text" name="address" id="address"/>
      <br/>
      自我介绍:
      <textarea name="comment" id="comment" ></textarea>
      <br/>
      <input type="submit" id="test" value="json方式返回" />
      <br/>
      <div id="jsonOut" ></div>
    </form>
    <!-- demo2 xml-->
    <h4>xml方式返回</h4>
    <form id="xmlForm" action="xml.jsp" method="post">
      名称:
      <input type="text" name="xmlname" id="xmlname" />
      <br/>
      地址:
      <input type="text" name="xmladdress" id="xmladdress"/>
      <br/>
      自我介绍:
      <textarea name="xmlcomment" id="xmlcomment" ></textarea>
      <br/>
      <input type="submit" id="xmltest" value="xml方式返回" />
      <br/>
      <div id="xmlOut" ></div>
    </form>
    <!-- demo3 html-->
    <h4>html方式返回</h4>
    <form id="htmlForm" action="html.jsp" method="post">
      名称:
      <input type="text" name="htmlname" id="htmlname" />
      <br/>
      地址:
      <input type="text" name="htmladdress" id="htmladdress"/>
      <br/>
      自我介绍:
      <textarea name="htmlcomment" id="htmlcomment" ></textarea>
      <br/>
      <input type="submit" id="htmltest" value="html方式返回" />
      <br/>
      <div id="htmlOut" ></div>
    </form>
    </body>
    </html>

    后台对应的三个JSP页面代码:

    json.jsp

    <%@ page contentType="text/html; charset=UTF-8"%><%
        String name = request.getParameter("name");
        String address = request.getParameter("address");
        String comment = request.getParameter("comment");
        
        System.out.println("后台json.jsp收到:" + name);
        
        out.println("{ "name" : ""+name+"" , "address" : ""+address+"", "comment" : ""+comment+""}");
    %>

    xml.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
      // XML 格式返回数据,需要注意不要留有换行符等(最上面)
        String name = request.getParameter("xmlname");
        String address = request.getParameter("xmladdress");
        String comment = request.getParameter("xmlcomment");
    
        System.out.println("后台xml.jsp收到:" + name);
        
        response.setContentType("text/xml");
        out.println("<?xml version='1.0' encoding='UTF-8'?>");
        out.println("<root>");
        out.println("<name>"+name+"</name>");
        out.println("<address>"+address+"</address>");
        out.println("<comment>"+comment+"</comment>");
        out.println("</root>");
    %>

    html.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
      // XML 格式返回数据,需要注意不要留有换行符等(最上面)
        String name = request.getParameter("htmlname");
        String address = request.getParameter("htmladdress");
        String comment = request.getParameter("htmlcomment");
        
        System.out.println("后台html.jsp收到:" + name);
        
        response.setContentType("text/html; charset=utf-8");
        out.println("<div style='background-color:#ffa; padding:20px'>" + name + "," + address + "," + comment + "</div>");
    %>
  • 相关阅读:
    matlab cell
    matlab linux 快捷键设置——有问题还是要解决
    latex 小结
    TOJ 1258 Very Simple Counting
    TOJ 2888 Pearls
    HDU 1248 寒冰王座
    TOJ 3486 Divisibility
    TOJ 3635 过山车
    TOJ 1840 Jack Straws
    HDU 4460 Friend Chains
  • 原文地址:https://www.cnblogs.com/nayitian/p/3385635.html
Copyright © 2011-2022 走看看