jquery ajax例子返回值详解


Posted in Javascript onSeptember 11, 2012

在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");} 
%>
Javascript 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Jquery插件写法笔记整理
Sep 06 #Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 #Javascript
js防止表单重复提交实现代码
Sep 05 #Javascript
javascript面向对象入门基础详细介绍
Sep 05 #Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 #Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 #Javascript
Javascript中的delete介绍
Sep 02 #Javascript
You might like
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
许愿墙中用到的函数
2006/10/07 Javascript
range 标准化之获取
2011/08/28 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
导游实习生自荐书
2014/01/28 职场文书
入股协议书
2014/04/14 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python