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()方式

 

 

 

 

作者可没有说明 serialize() 是把表达数据弄成一个字符串，serializeArray()是把表达数据弄成json格式的数据

//将所有输入元素转换为按钮 
             var arr=$(":input").serializeArray(); 

//遍历数组 
             for (var index in arr){ 
                $("#show").append("第"+index+"个元素名称是"+arr[index].name+",值为"+arr[index].value+"<br/>"); 
             } 

有这两个描述，你的帖子可以删除。这是误导，要知道，错误的知识比无知更可怕。

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。

受教了，不过可以简单理解为数组对象吧。我那个是文章打错字了，上线不符了。

不好意思，注释打错了。因为我下面直接就是取值了，您这位高人应该可以理解的吧。和楼上的那位仁兄相比，我感觉您好像缺少点儿比较珍贵的东西。

好吧，你很牛好吧，我菜鸟行了吧，满足你优越感。
不跟你吵，受不了你冷嘲热讽。
楼下继续，讨论技术。

不好意思啊，我向你道歉。毕竟大家都不是怀着坏心思去看贴的。这又一次验证了我这个搞程序的，表达能力确实不行，以后一定注意，谢谢你看我的贴。