jQuery中Ajax相关方法
Ajax相关方法，两个工具方法（serialize(),serializeArray()）
<body><form id="test">用户名：<input id="user" name="user" type="text" /><br />个人介绍：<textarea id="desc" name="desc"></textarea><br />喜欢的图书：<select id="book" name="book"><option value="java">Java</option><option value="javaee">Java EE</option><option value="ajax">Ajax</option></select></form><button id="bn1">查询字符串</button><button id="bn2">查询JSON对象</button><hr /><span id="show"></span><script type="text/javascript">//为id为bn1的按钮绑定事件处理函数$("#bn1").click(function() {//将id为test1的表单转换为查询字符串$("#show").html($("#test").serialize());});//为id为bn2的按钮绑定事件处理函数$("#bn2").click(function() {//将所有输入元素转换为数组var arr = $(":input").serializeArray();$("#show").empty();//遍历arr数组for ( var index in arr) {$("#show").append("第" + index + "表单控件名为：" + arr[index].name + ",值为："+ arr[index].value + "<br />");}});</script></body>?Ajax相关方法,load()方法的使用<body><center><h3>使用load来发送Ajax请求很简便，开发者不需要考虑XMLHttpRequest的细节，</h3><h3>要是开发者想要管理Ajax请求的细节，则可以考虑jQuery.ajax(options)的方法</h3></center><h3>请输入你的信息：</h3><form id="user">用户名:<input type="text" name="user" /><br />喜欢的图书:<select multiple="multiple" name="books"><option value="java">Java</option><option value="javaee">Java EE</option><option value="ajax">Ajax</option><option value="xml">XML</option></select><br /><input id="load" type="button" value="Load" /></form><hr /><div id="show"></div><script type="text/javascript">//为id为load的按钮绑定事件处理函数$("#load").click(function() {//向pro.jsp发送Ajax请求，并自动加载服务器响应$("#show").load("LoadServlet", $("#user").serializeArray());});</script></body>?Ajax相关方法,使用get/post方法请求（下面是script.jsp代码）<body><h3>请输入你的信息：</h3><form id="user">用户名:<input type="text" name="user" /><br />喜欢的图书:<select multiple="multiple" name="books"><option value="java">Java</option><option value="javaee">Java EE</option><option value="ajax">Ajax</option><option value="xml">XML</option></select><br /><input id="load" type="button" value="发送异步GET请求" /></form><hr /><div id="show"></div><script type="text/javascript">//为id为load的按钮绑定事件处理函数$("#load").click(function() {//指定向pro.jsp发送请求，以id为user表单里各表单空间作为请求参数$.get("LoadServlet", $("#user").serializeArray(),//指定回调函数function(data, statusText) {$("#show").empty();$("#show").append("服务器响应状态为：" + statusText + "<br />");$("#show").append(data);},//指定服务器响应为html"html");});</script></body>?使用jQuery的getScript方法<body><ul style="display: none"><li></li><li></li><li></li><li></li></ul><input id="get" type="button" value="getScript" /><div id="show"></div><script type="text/javascript">//为id为get的按钮绑定事件处理函数$("#get").click(function() {$.getScript("script.jsp");});</script></body>?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>使用jQuery的getScript方法</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="js/jquery-1.4.3.js" type="text/javascript"></script></head><body><ul style="display: none"><li></li><li></li><li></li><li></li></ul><input id="get" type="button" value="getScript" /><div id="show"></div><script type="text/javascript">//为id为get的按钮绑定事件处理函数$("#get").click(function() {$.getScript("script.jsp");});</script></body></html>上面所有的请求都是LoadServletimport java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class LoadServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");PrintWriter out = response.getWriter();String user = request.getParameter("user");String[] books = request.getParameterValues("books");out.println(user + ",你好，现在时间是：" + new java.util.Date());out.println("<br>你喜欢的图书如下：");out.println("<ol>");for (int i = 0; i < books.length; i++) {out.println("<li>" + books[i] + "</li>");}out.println("</ol>");}}?