js跨域请求数据

╰+攻爆jí腚メ 2022-07-28 05:17 137阅读 0赞

方式一。

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][http_localhost_8081_test_doCallBack.jsp]不在同一个域

2.[http://localhost:8081/test/doCallBack.jsp][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.后台处理同上

方式三： 通过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的支持  
 ![Center][]

[http_localhost_8081_test_doCallBack.jsp]: http://localhost:8081/test/doCallBack.jsp
[Center]: /images/20220727/02a65e120f664cd98c8eecbb1b802d65.png