jquery对ajax编程的支持
jquery对ajax编程的支持
1、序列化元素：
serialize():将jquery对象包含的
表单或者表单控件转换成查询字符串
serializeArray()：转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象。
序列化元素的作用，主要是用于ajax请求中，给data赋值。
2、三个方法
1)load(url,[data]): 将服务器返回的数据直接插入到符合
要求的节点之上。
url: 服务器上的组件的地址
data:发送给服务器的请求参数:
string: "username=zs&&age=22"
object: {"username":"zs","age",22}
2)$.get(url,[data],[callback],[type]):其中，callback格式 function(data,statusText)
url: 服务器上的组件的地址
data:发送给服务器的请求参数:
string: "username=zs&&age=22"
object: {"username":"zs","age",22}
callback: 回调函数,包含两个参数,第一个参数
是服务器返回的数据，第二个参数是状态。
type:服务器返回的数据类型
text: 文本内容
json: json字符串
xml: xml文档
script: javascript脚本
html: html内容
$.post()格式同上。
3)$.ajax(options):options是一个形如
{key1:value1,key2:value2...}的js对象，用于指定
发送请求的选项。
选项参数如下：
url(string):请求地址
type(string):GET/POST
data(object/string):发送到服务器的数据
(这儿可以使用serialize()或者serializeArray()方法)
dataType(string) :预期服务器返回的数据类型
text: 文本内容
json: json字符串
xml: xml文档
script: javascript脚本
html: html内容
success(function):请求成功后调用的回调函数，
有两个参数：
function(data,textStatus),其中，
data是服务器返回的数据，可以是html,text,jsonObj,xmlDoc
textStatus 描述状态的字符串。
error(function):请求失败时调用的函数，
有三个参数:
function(xhr,textStatus,errorThrown)
xhr: 底层的XmlHttpRequest对象
textStauts:错误状态
errorThrown:错误状态
async: true(默认值)/false,当值为true时，发送
异步请求，当值为false时，发送同步请求。
例子1：
stock.jsp
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <style> #d1{ width:500px; height:300px; border:1px solid red; background-color:#fff8dc; margin:30px auto; } </style> <script type="text/javascript" src="js/jquery-1.4.3.js"> </script> <script type="text/javascript"> function quoto(){ $('tbody').html(''); $.post('quoto.do',function(data){ //data：服务器返回的数据, //如果返回的数据是json字符串，会自动 //转换成javascript对象或者javascript对象 //组成的数组 for(i=0;i<data.length;i++){ $('tbody').append( '<tr><td>' + data[i].stockNo + '</td><td>' + data[i].stockName + '</td><td>' + data[i].price + '</td></tr>'); } },'json'); } $(function(){ setInterval(quoto,1000); }); </script> </head> <body style="font-size:30px;"> <div id="d1"> <div id="d2">实时股票价格信息</div> <div id="d3"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <thead> <tr><td>股票代码</td><td>股票名称</td><td>报价</td></tr> </thead> <tbody> </tbody> </table> </div> </div> </body> </html>
例子2:
car.jsp
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <style> #d1{ width:500px; margin-left:50px; margin-top:40px; } #tips{ display:none; background-color:#fff8dc; border:1px dotted red; } </style> <script type="text/javascript" src="js/jquery-1.4.3.js"> </script> <script type="text/javascript"> $(function(){ $('#s1').change(function(){ $('tbody').html(''); $.ajax({ url:'<%=request.getContextPath()%>/carInfo.do', type:'post', //data:{'carName':$('#s1').val()}, data:$('#s1').serializeArray(), //data: carName = $('#s1').val(), //data:$('#s1').serialize(), dataType:'xml', success:function(data1){ //data1:服务器返回的数据 //如果返回的是json字符串，会自动 //转换成javascript对象或者数组 //如果返回的是xml，会将其转换成 //一棵xml dom树，可以使用jQuery //提供的遍历方法，比如parent,children,find //来访问棵树 //为了方便遍历，要使用$(data1),将其包装成 //一个jQuery对象。 $('tbody').append( '<tr><td>长度:' + $(data1).find('size').text() +'车重:' + $(data1).find('weigth').text() + '</td><td>排汽量:' + $(data1).find('vol').text() + ' 加速性能:' + $(data1).find('speed').text() + '</td><td>车门数:' + $(data1).find('doors').text() + ' 颜色:' + $(data1).find('color').text() + '</td></tr>'); $('#tips').show(); setTimeout(function(){ $('#tips').hide(); },3000); }, error:function(){ alert('系统出错'); } }); }); }); </script> </head> <body style="font-size:30px;"> <div id="d1"> <div>热门suv精选</div> <div> <select style="width:150px;" name="carName" id="s1" style="font-size:40px;"> <option value="bmwx6">bmw x6</option> <option value="benz550">benz 550ml</option> <option value="canye">卡宴</option> </select> <div> <div id="tips"> <table cellpadding="0" cellspacing="0" width="100%"> <thead> <tr style="background-color:#cccccc"><td>基本参数</td><td>发动机</td><td>其它</td></tr> </thead> <tbody> </tbody> </table> </div> </div> </body> </html>
例子3：
order.jsp
<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <script type="text/javascript" src="js/jquery-1.4.3.js"> </script> <script type="text/javascript"> $(function(){ $('.s1').toggle(function(){ //使用遍历的方式找到航班号 var airline = $(this).parent().siblings().eq(0).text(); //使用ajax向服务器发请求 //$(this).next() //.load('price.do','airline=' + airline); $(this).next().load('price.do', {'airline':airline}); $(this).html('显示经济舱价格'); },function(){ $(this).next().empty(); $(this).html('显示全部价格'); }); }); </script> </head> <body style="font-size:30px;"> <table cellpadding="0" cellspacing="0" border="1"> <tr><td>航班号</td><td>机型</td><td>起飞时间</td><td>到达时间</td><td> </td><td>经济舱价格</td><td> </td></tr> <tr><td>ca1008</td><td><a href="#">767</a></td><td>8:00</td><td>10:00</td><td><a href="javascript:;" class="s1">显示所有票价</a><div></div></td><td>￥1200</td><td><input type="button" value="订票"/></td></tr> <tr><td>mu2000</td><td><a href="#">320</a></td><td>6:00</td><td>9:00</td><td><a href="javascript:;" class="s1">显示所有票价</a><div></div></td><td>￥800</td><td><input type="button" value="订票"/></td></tr> </table> </body> </html>
共用的ActionServlet.java
package web; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import bean.Stock; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uri = request.getRequestURI(); String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); if(action.equals("/price")){ System.out.println("price..."); String airline = request.getParameter("airline"); String airlineInfo = ""; if(airline.equals("ca1008")){ airlineInfo = "头等舱:￥2400<br/>商务舱:￥2000"; }else{ airlineInfo = "头等舱:￥2000<br/>商务舱:￥1600"; } out.println(airlineInfo); }else if(action.equals("/quoto")){ //模拟生成10支股票信息 List<Stock> stocks = new ArrayList<Stock>(); Random r = new Random(); for(int i=0;i<10;i++){ Stock s = new Stock(); s.setStockNo("s1000" + i); s.setStockName("深发展" + i); s.setPrice(r.nextInt(100)); stocks.add(s); } //将stocks内容转换成json字符串 JSONArray arry = JSONArray.fromObject(stocks); String str = arry.toString(); System.out.println(str); out.println(str); }else if(action.equals("/carInfo")){ //模拟一个错误 if(1==2){ throw new ServletException("some error"); } //将车的信息以xml文档的方式发送给客户端 response.setContentType( "text/xml;charset=utf-8"); String carName = request.getParameter( "carName"); System.out.println("carName:" + carName); StringBuffer sb = new StringBuffer(); sb.append("<car>"); if(carName.equals("bmwx6")){ sb.append("<basic><size>4.8</size><weigth>2t</weigth></basic>"); sb.append("<enginee><vol>3.2</vol><speed>5s</speed></enginee>"); sb.append("<other><doors>5</doors><color>red</color></other>"); }else if(carName.equals("benz550")){ sb.append("<basic><size>5.1</size><weigth>2.5t</weigth></basic>"); sb.append("<enginee><vol>4.2</vol><speed>4s</speed></enginee>"); sb.append("<other><doors>5</doors><color>yellow</color></other>"); }else{ sb.append("<basic><size>4.6</size><weigth>1.9t</weigth></basic>"); sb.append("<enginee><vol>2.2</vol><speed>7s</speed></enginee>"); sb.append("<other><doors>5</doors><color>blue</color></other>"); } sb.append("</car>"); out.println(sb.toString()); } out.close(); } }
xml配置：
<servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping>
使用到的Stock.java类
package bean; public class Stock { private String stockNo; private String stockName; private double price; public double getPrice() { return price; } public void setPrice(double price) { this.price = price; } public String getStockName() { return stockName; } public void setStockName(String stockName) { this.stockName = stockName; } public String getStockNo() { return stockNo; } public void setStockNo(String stockNo) { this.stockNo = stockNo; } }