学习：JsonP跨域的实例，Jsonp原生和JQuery方法，JAVA后端ssmspringBC

it2025-12-18 13

要了解同源策略，导致跨域，如何解决。

直接写前端的三种跨域方式，

怕忘了自己的思路，记下来免得以后再去找。

代码：

<!DOCTYPE html> <html> <head> <title>Title</title> <script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script> <script type="text/javascript"> var url = '填写你的请求地址'; function query() { //方案一：getJSON $.getJSON(url,function(data) { alert(JSON.stringify(data)); } ); //方案二：ajax $.ajax({ url: url, dataType: 'json', jsonpCallback: 'callback', //Jquery生成验证参数的名称 type: 'get', success: function(data) { console.info(data); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); } }); } //方案三：原生 jsonp 跨域 function GetJsonp() //创建 script var tag = document.createElement('script'); //设置 script 的属性 src 的路径为后端 controller 的请求路径，src可以跨域请求 //要求，controller 返回的值是一个字符串，该字符串为：一个函数调用调用的函数名为下方设置好的 callback() //controller 返回值格式 "callback(" + jsonData + ")" tag.src = url; document.head.appendChild(tag); document.head.removeChild(tag); } function callback(data) { alert("执行了 callback 回调函数！"); alert("参数为："+ JSON.stringify(data)); //console.log(data); } </script> </head> <body> <input type="button" value="JQuery" onclick="query()"> <input type="button" value="原生Jsonp" onclick="GetJsonp()"> </body> </html>

前两个方案 controller 这样写:

@RequestMapping(value = "/",method = RequestMethod.GET) @ResponseBody public String testMethod(Object arg1,Object arg2) { //。。。。省略代码 String jsonStr = "{'test':'获得数据'}"; //直接返回数据就行，前端 JQ 的回调函数会获得此返回值，获得的是JSON类型的对象！ return str; }

第三个，要吃透原生jsonp的原理，上网查。。。简单讲就是这么几个步骤：

定义一个函数，随便起名字叫function callback (data) { };通过dom编程的方式，创建一个 script 标签，设置该标签的 src 属性为 controller 的请求路径，并把它放到 head 标签中。这个被创建的 script 会根据 src 去请求服务器请求到的内容会写在标签内。利用第三步的机制，我们在 controller 中 return 一个字符串格式为： “callback(” + json数据 + “);”此时页面会调用之前定义的 callback 方法并向其中传入数据。

这样就可以在这个 callback 回调方法中，通过数据渲染视图了。

值得注意的是：这个过程中要求 controller 明确回调方法的名称。这就需要在 url 后面添加一个参数，通过地址传参的方式将回调方法名 callback 传递给 controller

比如：

这样写请求地址 var url = 'http://localhost:8080/test?callback=callback';

对应的 controller ：

最新回复(0)