JQuery大大简化了Ajax通用操作，开发者只需要指定请求URL，回调函数即可。
三个主要方法：
$().param(obj):将obj参数（对象或数组）转化成查询字符串。
{name:"疯狂Java讲义", price:109}转换出的查询字符串为：
name=%E7%96%AF%E7%8B%82Java%E8%AE%B2%E4%B9%89&price=109
serialize()：将表单或表单控件转化成查询字符串。
user=vince&desc=%E4%BB%8B%E7%BB%8D&book=javaee
serializeArray():将表单或表单控件转化成形如{name:namelabel , value:realvalue}的对象。
第0表单控件名为：user,值为：vince
第1表单控件名为：desc,值为：介绍
第2表单控件名为：book,值为：javaee
实例
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 处理表单 </title> </head> <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> <button id="bn3">将对象转换为查询字符串</button><hr /> <span id="show"></span> <script type="text/javascript" src="../jquery-1.8.0.js"> </script> <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 />"); } }); $("#bn3").click(function() { // 调用$.param将对象转换为查询字符串 $("#show").html('{name:"疯狂Java讲义", price:109}' + '转换出的查询字符串为：<br/>' + $.param({name:"疯狂Java讲义", price:109})); }); </script> </body> </html>
load(url[,data][,callback]):向URL异步请求，将相应插入当前DOM。
data格式：{key1:val1,key2:val2}。callback是回调函数。
实例
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 使用jQuery的load方法 </title> </head> <body> <h3>请输入你的信息：</h3> <form id="userForm"> 用户名:<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 src="jquery-1.8.0.js" type="text/javascript"> </script> <script type="text/javascript"> // 为id为load的按钮绑定事件处理函数 $("#load").click(function() { // 向pro发送Ajax请求，并自动加载服务器响应 $("#show").load("pro" , $("#userForm").serializeArray()); }); </script> </body> </html>
服务器端如何接收及响应Ajax
- Servlet response可接收可发送
- 服务器端写到session中
- struts 2支持stream类型的Result，可直接向浏览器生成二进制响应。
- Struts 2支持JSON插件。
- Struts 2支持Dojo插件。
$().ajax(options)
