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