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 + '\n 返回的内容是: \n' + 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>");
%>

posted @ 2013-10-24 11:08 那些年的事儿阅读(486) 评论(0) 编辑收藏举报

刷新页面返回顶部

jQuery学习笔记（jquery.form插件）

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

2. ajaxForm() 和 ajaxSubmit() 参数

3. 处理服务器返回类型

公告