夏日博客

A-A+

jquery ajax例子返回值详解

2016年01月20日 前端设计 暂无评论 阅读 6 views 次

$.ajax()跟($.post(),$.get())最主要的差别就是 成功回调后,执行success. . $.post(),$.get()就只能简单的做下传递 ,返回. .后续工作没法继续.所以看情况调用,在JQuery中，AJAX有三种实现方式：$.ajax() , $.post , $.get()。

首先我们看$.get(),代码如下:

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

然后看$.post(),跟$.get()格式一样,代码如下:

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

上面2种方式的区别应该就是 请求方式不同(一个get 一个post).

最后我们看$.ajax(),代码如下:

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

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

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

js部分的代码如下:

  1. function myvote(id){  
  2.     $.post("vote.jsp", { id: id },  
  3.   function(data){  
  4.         eval("var data="+data);  
  5.     if (data.issucc=="0"){  
  6.         alert(data.mess)  
  7.     }else{  
  8.         //alert("更新页面");  
  9.         $("#i"+data.myid).html(data.votenum);  
  10.         }  
  11.   });  
  12. }  

返回数据为json,后台返回的json数据如下.

{issucc:,mess:”“,votenum:,myid:}

issucc:是否成功

mess:信息,主要是错误信息，比如没登录，超过限制等

votenum:投票后的得票总数

myid:投票的id,用于更新页面的投票数

一个注册登录实例,js

login.jsp返回的类型为text形式，正确时是“OK”，错误时是“error”,代码如下:

  1. var userName;   
  2. var password;   
  3. var result;   
  4. $(document).ready(function(){   
  5. $("#load").hide();   
  6. $("#success").hide();   
  7. $("#error").hide();   
  8. });   
  9. $(document).ready(function(){   
  10. $("#button").click(function(){   
  11. $("#error").hide();   
  12. $("#load").show("slow");   
  13. userName = $("#userName").val();   
  14. password = $("#password").val();   
  15. $.ajax({type: "post",   
  16. url: "login.jsp",   
  17. dataType: "html",   
  18. data: "userName="+userName+"&password="+password,   
  19. success: function(result){   
  20. var res = String($.trim(result));   
  21. if(res=="OK"){   
  22. $("#myTable").hide("slow");   
  23. $("#success").show("slow");   
  24. }else if(res=="error"){   
  25. $("#error").show("slow");   
  26. $("#load").hide("slow");   
  27. }else{   
  28. alert("返回异常");}   
  29. }   
  30. });   
  31. });   
  32. });   

jsp页面,第一种responseText格式,代码如下:

  1. <%@ page language="java" pageEncoding="gb2312"%>    
  2. <%    
  3. String userName = request.getParameter("userName");    
  4. String password = request.getParameter("password");    
  5. if(password.equals("longleg")&&userName.equals("thy")){    
  6.     out.print("OK");    
  7. }else{out.print("error");}    
  8. %>   
标签：

给我留言