jquery跨域Ajax请求

简介:

关键:ajax的dataType为jsonp,并且在请求的url中加上"?jsoncallback=?"

前台代码:

Html代码  收藏代码

  1. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>   

  2. <script type="text/javascript">  

  3.     function RegisterRequest2() {  

  4.         /* getJSON method is ok also...   

  5.         $.getJSON("http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?", { pwd: '123', username: 'tl' }, function(json) { alert(json.name); });   

  6.         */  

  7.            

  8.         $.ajax({  

  9.             url: "http://192.168.1.154:7087/ClusterServer/Rigister?jsoncallback=?",  

  10.             type: "GET",  

  11.             data: { pwd: '123', username: 'tl' },  

  12.             dataType: "jsonp",  

  13.             success: function(data) {  

  14.                 alert(data.name);  

  15.             },  

  16.             error: function(a, b, c) {  

  17.                 alert("error==" + b);  

  18.             }  

  19.   

  20.         });   

  21.     }    

  22. </script>  

  23. <input type="button" onclick="RegisterRequest2();"  value="StartRequest" />  

 

后台Servlet代码:

Java代码  收藏代码

  1. import java.io.IOException;  

  2.   

  3. import javax.servlet.ServletException;  

  4. import javax.servlet.http.HttpServlet;  

  5. import javax.servlet.http.HttpServletRequest;  

  6. import javax.servlet.http.HttpServletResponse;  

  7.   

  8. public class Rigister extends HttpServlet {  

  9.   

  10.     @Override  

  11.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  

  12.             throws ServletException, IOException {   

  13.         String pwd = req.getParameter("pwd");  

  14.         String username =req.getParameter("username");  

  15.         System.out.println("get=="+username+"  ==="+pwd);  

  16.            

  17.         String callback = req.getParameter("jsoncallback");   

  18.         resp.getWriter().write(callback + "({name:'tzy',phone:'123'})"); //参数为json格式  

  19.     }  

  20.   

  21.     @Override  

  22.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)  

  23.             throws ServletException, IOException {   

  24.         String pwd = req.getParameter("pwd");  

  25.         String username =req.getParameter("username");  

  26.         System.out.println("post=="+username+"  ==="+pwd);  

  27.            

  28.         String callback = req.getParameter("jsoncallback");   

  29.         resp.getWriter().write(callback + "({name:'tzy',phone:'123'})");   

  30.     }  

  31.   

  32. }  

 

后台返回前台的时候取出jsoncallback回调函数名,将json格式的数据作为函数的参数,整个以字符串的形式返回给前台。。





     本文转自布拉君君 51CTO博客,原文链接:http://blog.51cto.com/5148737/1568749,如需转载请自行联系原作者


相关文章
|
1月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
52 1
|
3天前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
26天前
|
XML JSON 前端开发
|
26天前
|
前端开发 JavaScript
|
28天前
|
JSON 前端开发 安全
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
浏览器跨域限制:为什么浏览器不能跨域发送Ajax请求?
24 0
|
1月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
14 0
|
1月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
13 0
|
1月前
|
XML 前端开发 JavaScript
AJAX如何向服务器发送请求?
AJAX如何向服务器发送请求?
31 0
|
JavaScript 前端开发 UED
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1139 0
|
前端开发 JavaScript UED
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1203 0

相关产品

  • 云迁移中心