码迷,mamicode.com
首页 > Web开发 > 详细

jquery的ajax实现方式

时间:2017-08-13 11:20:41      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:区别   iss   href   get   title   cli   lin   jsp页面   XML   

在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实现方式

标签:区别   iss   href   get   title   cli   lin   jsp页面   XML   

原文地址:http://www.cnblogs.com/fengli9998/p/7352608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!