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

标签: 菜鸟 jquery ajax | 发表时间:2012-07-29 23:47 | 作者:kmyangyang
出处:http://www.cnblogs.com/

在没有出现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();否则就会有多条描述和价格显示在页面。这样就能实现选择下拉列表中的汽车则显示该汽车的描述和价格。如下图:     

  

本文链接

相关 [菜鸟 jquery ajax] 推荐:

菜鸟简述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 跨域请求

- - 博客园_首页
使用 jquery 中的ajax  进行跨域请求. 说明:dataType 为  "jsonp"  ;type 只能为 GET.                    //处理错误. 后台处理代码 ValidAccountsExists.aspx.

jquery的$.ajax() $.post() $.getJSON() 等ajax方法时,中文参数乱码问题

- - CSDN博客推荐文章
在使用jquery的$.ajax()  $.post() $.getJSON() 等ajax方法时,难免会有用到中文参数的问题,在后台接收的中文参数是乱码,解决方法如下:.     dataType : ‘json’     ,type : ‘POST’     ,url : ‘http://localhost/test/test.do’     ,data : {id: 1, type: ‘商品’}     ,success : function(data){             } } );.

10款实用的Ajax相关的jQuery插件推荐

- jingjing - ITeye资讯频道
本文搜集了10款最近受欢迎的、实用的AJAX jQuery插件,包括终端命令行、分页、图表、购物车插件等,你可以在你的网站或应用中使用这些插件,以达到意想不到的效果. 该插件可以在网站上实现终端交互效果. 这可不是FTP或SSH终端,你可以定义交互的命令. 该插件可以使用多种方式来解决页面分页问题,它采用一个简单而直截的Callback设计.

jQuery中利用JSONP解决AJAX跨域问题

- - 蓝飞技术博客
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格,同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库,将如下代码添加到标签之前:.

jQuery ajax - serialize()方法以及常见问题

- - CSDN博客推荐文章
使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用 JQuery的serialize方法可以轻松的完成这个工作. jQuery ajax - serialize() 方法定义和用法. serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身.

使用jQuery ajax中按钮button和submit的区别

- - 博客园_首页
昨天在使用jQuery ajax的post方法进行页面传值,无刷新获取数据展示,弄了半天就是没有效果,看了半天也没有语法错误,最后才终于明白问题出在哪里.. jQuery ajax的post方法这样写应该是没有问题的,点击submit提交按钮,sendPwd.php通过$_POST接收传过来的值,然后echo一段数据.

精心挑选的12款优秀 jQuery Ajax 分页插件和教程

- - 博客园_梦想天空
  在这篇文章中,我为大家收集了12个基于 . jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示. Web 项目的用户体验有了极大的提高,如今借助优秀的. jQuery 框架很容易实现各种基于 Ajax 技术实现的功能. 我们一起来看看下面这些优秀的分页插件. jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放、按键翻页、延迟加载等等.

原生AJAX

- - Web前端 - ITeye博客
对象是ajax的基础,几乎所有的浏览器都支持他,只是创建方式不同,如IE5,IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用. 然而,在以下情况中,请使用 POST 请求:. 无法使用缓存文件(更新服务器上的文件或数据库). 向服务器发送大量数据(POST 没有数据量限制).