jQuery 学习（四）

说jQuery，不得不说jQuery对ajax的支持。

首先学习两个方法：serialize()，serializeArray()

html：

<form id="test">
       用户名：<input id="user" name="user" type="text" value="yanzhenwei"/><br/>
       个人介绍：<textarea rows="5" cols="10" id="desc"name="desc">
         热情，大方，热爱编程
       </textarea><br/>
       喜欢的图书：<select id="book" name="books">
         <option value="java">疯狂java讲义</option>
         <option value="javaee">轻量级Java EE 企业应用</option>
         <option value="ajax">疯狂Ajax讲义</option>
       </select>
       <br/>
       <button id="bn1">查询字符串</button>
       <button id="bn2">查询json对象</button>
       <input id="load" type="button" value="load"/>
       <span id="show"></span>
    </form>

 

js:

 //将id为bn1的按钮绑定事件处理函数
           $("#bn1").click(function (){
              //将id为test的表单转换成为查询字符串
              $("#show").html($("#test").serialize());
           });
           $("#bn2").click(function (){
              //将所有输入元素转换为按钮
              var arr=$(":input").serializeArray();
              $("#show").empty();
              //遍历数组
              for (var index in arr){
                 $("#show").append("第"+index+"个元素名称是"+arr[index].name+",值为"+arr[index].value+"<br/>");
              }
  });

以上两个参数对于以后传递参数非常重要。

首先看一个以load方式的ajax例子：

html:还是刚才那个html.

js：

 $("#load").click(function (){
             $("#show").load("pro.jsp",$("#test").serializeArray());
  });
        

 

当然，还需要pro.jsp

<%@ page language="java"  pageEncoding="gbk"%>
<%
     String user=request.getParameter("user");
     String[] books=request.getParameterValues("books");
     out.println(user+",您喜欢的图书是：");
     out.println("<ol>");
     for(int i=0;i<books.length;i++){
    	 out.println("<li>"+books[i]+"</li>");
     }
    out.println("</ol>");
%>

 

接着看一个以get方式的ajax的例子：

html 同上

js:

$("#load").click(function (){
             $("#show").load("pro.jsp",$("#user").serializeArray(),
                function (data,statusText){
                    $("#show").append("服务器响应状态为："+statusText+"<br/>");
                    $("#show").append(data);
                },
                "html"
             );
   });

 

由于post方式和get方式差不多，故不再举例。

说明，如果数据量不是太大可以使用jQuery.get()方式；如果数据量比较大，建议用jQuery.post()方式