菜鸟简述Jquery中Ajax发送post请求及XML响应

在没有出现jquery前,是通过纯手工的方式获取XmlHttpRequest对象来向服务器发送异步请求实现局部刷新。在jquery出现以后我们利用其封装好的对象来实现ajax请求,下面以post请求为例作一个简单介绍:

jQuery.post(url, [data], [callback], [type]),其中url为请求地址,data为待发送的参数及其值,callback为发送成功时的回调函数,type为返回内容的类型(xml、html、text、json等)。为了能够使用jquery中的ajax,首先需在jsp页面中导入juery.js文件,然后在jsp页面中写如下一段js代码:

<script type="text/javascript">

           $(function(){

              $('#s1').change(function(){

                  $('#tips').remove();

                  var carName = $(this).val();

                  $.ajax({

                     url:'car2.do',

                     type:'post',

                     data: 'carName=' + carName,

                     dataType:'xml',

                     success:function(data){

                         //成功之后调用该函数

                         //data:服务器返回的数据,

                         //如果服务器返回的是一个xml文档

                         //需要调用$(data),将xml转换成一个jQuery对象

                         $('#s1').after("<div id='tips'></div>");

                         $('#tips').html('描述:'

                         + $(data).find('desc').text() + ' 价格:'

                         + $(data).find('price').text());

                     },

                     error:function(){

                         //失败调用该函数

                         alert('系统出错');

                     }

                  });

              });

           });

 

</script>

为了能让各位园友看得更直观,jsp页面中还有如下html代码:

<div>

              <select id="s1" style="width:120px;">

                  <option value="cayene">卡宴turbo</option>

                  <option value="x6m">宝马x6m</option>

                  <option value="bb">猎豹</option>

              </select>

</div>

以上为客户端代码,为能够响应请求,我们需在服务器端写好一个Servlet来响应请求,目的是用户选择相应的汽车后能给用户该汽车的描述和价格,并且以xml类型的数据进行返回。服务器端代码如下:

response.setContentType("text/xml;charset=utf-8");

String carName = request.getParameter("carName");

StringBuffer sb = new StringBuffer();

sb.append("<car>");

if(carName.equals("cayene")){

  sb.append("<desc>跑得很快,也很好看</desc>");

  sb.append("<price>1000000</price>");

}else if(carName.equals("x6m")){

  sb.append("<desc>跑得最快,但不好看</desc>");

  sb.append("<price>2000000</price>");

}else{

  sb.append("<desc>白领的最爱</desc>");

  sb.append("<price>200000</price>");

}

sb.append("</car>");

out.println(sb.toString());

服务器端的Servlet是以*.do后缀匹配的形式匹配请求资源路径,当请求资源路径为car2.do时服务器端通过取子串可以将car2取出后作出相应的响应。同时需要注意每次显示服务器端返回的内容时需将之前的内容清空,也就是$('#tips').remove();否则就会有多条描述和价格显示在页面。这样就能实现选择下拉列表中的汽车则显示该汽车的描述和价格。如下图:     

  

posted @ 2012-07-29 23:47  kmyangyang  阅读(...)  评论(...编辑  收藏