jquery ajax跨域获取数据

最新推荐文章于 2021-10-09 09:00:24 发布

原创最新推荐文章于 2021-10-09 09:00:24 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ajax #跨域访问

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决AJAX跨域访问的方法，通过在前端请求中加入callback参数，并在后端响应中以JSONP格式返回数据实现跨域访问。重点介绍了如何配置前后端以支持跨域请求。

ajax跨域访问，比如服务器A和服务器B不在相同的域名上，A上的一个文件想通过ajax异步访问B获取数据。如果没有采取一些措施。浏览器将报如下错误

那么该怎么做呢？原理本人也还没去研究弄懂，先暂时记录下该如何做。

1.准备后台源码，返回json格式字符串。

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		  String cb = request.getParameter("callback");
		  response.setContentType("text/html;charset=utf-8");
		  //构造 json格式数据，可借助JSONObject来帮助
		  String rc = "{'code':'true'}";
		  System.out.println("====cb"+cb);
		  response.getWriter().print(cb+"("+rc+")");
	}

2.启动tomcat服务器，后台运行起来。

3.在桌面或其它地方建立一个ajaxtest.html文件（名称随便）

<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var doUrl = "http://127.0.0.1:8080/ajaxtest/AjaxTestServlet.do?callback=?";//最后必须要有callback=?,必须是?
//=======方式一
//失败
/*
$.ajax({
  url : doUrl ,
  type: "post",
  dataType : 'text',
   success : function(data) {
   alert(data);
   data = eval("("+data+")");
   alert(data.code);
  }
 });
 **/
 //=========方式二
 //失败
 /**
 $.get(doUrl,function(result){
    result = eval("("+result+")");
    alert(result.code);
 });
 **/
 //======方式三
 //失败
 /**
 $.post(doUrl,function(result){
    alert(result);
 });
 **/
 //======方式四
 //成功
 
 $.getJSON(doUrl,function(result){
    alert(result.code);
 });
 
 //=====方式五
 //成功
 /**
 $.ajax({
  url : doUrl ,
  type: "post",
  dataType : 'json',
   success : function(data) {
   alert(data.code);
  }
 });
 **/
</script>
</head>
</html>

通过上面的几种方式访问，发现如果用$.ajax这种方法，dataType必须是json.或者用$.getJSON这种方式。并且访问的URL最后必须加上参数callback=?。后台也必须接收callback,并且采用源码所示的格式返回。