js跨域请求数据

最新推荐文章于 2024-01-04 20:28:29 发布

置顶木子金丰

最新推荐文章于 2024-01-04 20:28:29 发布

阅读量577

点赞数 1

本文链接：https://blog.csdn.net/u010509052/article/details/51023694

版权

方式一。

1. calljs.html 页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		function a(data){
			alert("===>"+data.name);
		}
	</script>
	<script src="http://localhost:8081/test/doCallBack.jsp?callback=a"></script>
</body>
</html>

注意:calljs.html和http://localhost:8081/test/doCallBack.jsp不在同一个域

2.http://localhost:8081/test/doCallBack.jsp 的后台处理

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String func = request.getParameter("callback");
	String data = "{'name':'xxx'}";
	out.println(func+"("+ data +")");//这里应该是从<a target=_blank href="http://localhost:8081/test/doCallBack.jsp?callback=a">http://localhost:8081/test/doCallBack.jsp?callback=a</a>  获取的函数名 然后拼接这 a(参数) 种格式。
%>

这样就可以跨域请求数据了。。。。。。

方式二：通过jquery

1。jquerycalljs.html 页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
	$.getJSON("http://localhost:8081/test/doCallBack.jsp?callback=?",function(data){
		alert(data);
	}); //callback=? 这个?   jquery会自动生成一个值
</script>
</body>
</html>

2.后台处理同上

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String func = request.getParameter("callback");
	String data = "{'name':'xxx'}";
	out.println(func+"("+ data +")");
%>

方式三：通过jquery的ajax

1.js

$.ajax({
    type:"get",    //请求方式
    async:true,    //是否异步
    url:"http://localhost:8081/webdemo/servlet/test2",
    dataType:"jsonp",    //跨域json请求一定是jsonp
    jsonp: "callback",    //跨域请求的参数名，默认是callback
    data:{"query":"civilnews"},    //请求参数
    /*最后自动生成url:callback=随机生成
       http://localhost:8888/webdemo/servlet/test2?callback=1231235421543&query=civilnews&_=1508219299371
    */
    success: function(data) {
        //请求成功处理，和本地回调完全一样
        alert(data);
    }
});

或者

$.ajax({
    type:"get",    //请求方式
    async:true,    //是否异步
    url:"http://localhost:8081/webdemo/servlet/test2",
    dataType:"jsonp",    //跨域json请求一定是jsonp
    jsonp: "callback",    //跨域请求的参数名，默认是callback
    jsonpCallback: "callBackFun",    //回调返回名称,如果不设置jQuery随机生成,会回调这函数
    data:{"query":"civilnews"},    //请求参数
    /*最后自动生成url:不设置jsonpCallback,将随机生成
       http://localhost:8888/webdemo/servlet/test2?callback=callBackFun&query=civilnews&_=1508219299371
    */
    success: function(data) {
        //请求成功处理，和本地回调完全一样
        alert(data);
    }
});

function callBackFun(data){
    alert(data);
}

2.后台：

《1》servlet

   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String callback = req.getParameter("callback");
        String data = "{'name':'xxxxxxxxx'}";
        //可同时支持json和jsonp
        if(callback == null || callback == ""){
            resp.getOutputStream().write(data.getBytes());
        }else{
            resp.getOutputStream().write((callback+"("+ data +")").getBytes());
        }
    }

《2》springmvc的支持

木子金丰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js跨域请求数据

方式一。 1. calljs.html 页面Insert title here function a(data){ alert("===>"+data.name); } 注意:calljs.html和http://localhost:8081/test/doCallBack.jsp不在同一个域 2.http://localhos
复制链接

扫一扫