jquery ajax例子返回值详解

更新时间：2012年09月11日 17:45:01 作者：

$.ajax()跟($.post(),$.get())最主要的差别就是成功回调后,执行success. . $.post(),$.get()就只能简单的做下传递 ,返回. .后续工作没法继续.所以看情况调用

在JQuery中，AJAX有三种实现方式：$.ajax() , $.post , $.get()。
首先我们看$.get():

 
$.get("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据 
function(data){ 
alert("返回的数据: " + data); 
} 
) 

然后看$.post():
跟$.get()格式一样.

复制代码代码如下:

 
$.post("test.jsp", 
{ name: "cssrain", time: "2008/01/21" }, //要传递的数据 
function(data){ 
alert("返回的数据: " + data); 
} 
) 

上面2种方式的区别应该就是请求方式不同(一个get 一个post).
最后我们看$.ajax():

复制代码代码如下:

 
$.ajax({ 
url:'Accept.jsp', 
type:'post', //数据发送方式 
dataType:'html', //接受数据格式 (这里有很多,常用的有html,xml,js,json) 
data:'text='+$("#name").val()+'&date='+new Date(), //要传递的数据 
error: function(){ //失败 
alert('Error loading document'); 
}, 
success: function(msg){ //成功 
alert( "Data Saved: " + msg ); 
} 
}); 

实例
前台jsp部分的代码如下：...
票数:

复制代码代码如下:

 
<span id="i<%=id%>"><%=vote_number%></span><br/> 
<a onclick=myvote(<%=id%>); href='javascript:;'">投票</a> 

...
js部分的代码如下

复制代码代码如下:

 
function myvote(id){ 
$.post("vote.jsp", { id: id }, 
function(data){ 
eval("var data="+data); 
if (data.issucc=="0"){ 
alert(data.mess) 
}else{ 
//alert("更新页面"); 
$("#i"+data.myid).html(data.votenum); 
} 
}); 
} 

返回数据为json
后台返回的json数据如下
{issucc:,mess:”“,votenum:,myid:}
issucc:是否成功
mess:信息，主要是错误信息，比如没登录，超过限制等
votenum：投票后的得票总数
myid:投票的id，用于更新页面的投票数
一个注册登录实例
js
login.jsp返回的类型为text形式，正确时是“OK”，错误时是
“error”。

复制代码代码如下:

 
var userName; 
var password; 
var result; 
$(document).ready(function(){ 
$("#load").hide(); 
$("#success").hide(); 
$("#error").hide(); 
}); 
$(document).ready(function(){ 
$("#button").click(function(){ 
$("#error").hide(); 
$("#load").show("slow"); 
userName = $("#userName").val(); 
password = $("#password").val(); 
$.ajax({type: "post", 
url: "login.jsp", 
dataType: "html", 
data: "userName="+userName+"&password="+password, 
success: function(result){ 
var res = String($.trim(result)); 
if(res=="OK"){ 
$("#myTable").hide("slow"); 
$("#success").show("slow"); 
}else if(res=="error"){ 
$("#error").show("slow"); 
$("#load").hide("slow"); 
}else{ 
alert("返回异常");} 
} 
}); 
}); 
}); 

jsp页面
第一种responseText格式

复制代码代码如下:

 
<%@ page language="java" pageEncoding="gb2312"%> 
<% 
String userName = request.getParameter("userName"); 
String password = request.getParameter("password"); 
if(password.equals("longleg")&&userName.equals("thy")){ 
out.print("OK"); 
}else{out.print("error");} 
%> 

您可能感兴趣的文章:

jquery
ajax

jquery下操作HTML控件的实现代码
jquery 的操作HTML控件，需要的朋友可以参考下。
2010-01-01
jQuery移除tr无效的解决方法(tr是动态添加)
移除掉某些tr（tr是动态添加的）尝试了很多方法，都不见效，后来发现个不错的方法，于是与大家分享下
2014-09-09
jQuery 获取、设置HTML或TEXT内容的两种方法
这篇文章主要介绍了jQuery 获取、设置HTML或TEXT内容的两种方法,需要的朋友可以参考下
2014-05-05
jQuery背景插件backstretch使用指南
Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换
2015-04-04
jQuery+HTML5加入购物车代码分享
这篇文章主要为大家详细介绍了jQuery+HTML5加入购物车的实现代码，功能很齐全，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
jQuery 中的 DOM 操作
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的.
2016-04-04
基于jquery的代码显示区域自动拉长效果
今天看到一个技术类网站，在显示代码的地方，边框会拉长，很方便用户阅读体验，特看了下代码，原理很简单，使用了jquery，不适用也可以实现
2011-12-12
jQuery Validate表单验证插件的基本使用方法及功能拓展
这篇文章主要介绍了jQuery Validate表单验证插件的基本使用方法及功能拓展的相关资料,本文给大家介绍的非常详细，需要的朋友可以参考下
2017-01-01
jquery设置元素的readonly和disabled的写法
Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下，感兴趣的朋友可以练练手了
2013-09-09
jQuery中 prop() attr()使用详解
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
2015-05-05