摘要:在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get()。 首先我们看$.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有三种实现方式:$.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技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接:

js实例教程-jquery ajax例子返回值详解

http://www.js-code.com/js/js_1096.html

80%的人都看过