JSONP实现跨域
JSONP实现跨域
1.AJAX跨域访问
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ alert("测试访问开始!!!!!") $.ajax({ url:"http://manage.jt.com/web/testJSONP", type:"get", dataType:"jsonp", //返回值类型callback(data) //jsonp: "callback", //指定参数名称 //jsonpCallback: "hello", //指定回调函数名称 success:function (data){ alert(data.id); alert(data.name); //转化为字符串使用 //var obj = eval("("+data+")"); //alert(obj.name); } }); }) </script>
2.后端
@Controller public class JSONPController { //http://manage.jt.com/web/testJSONP?callback=jQuery111104246765155397203_1541993772596&_=1541993772597 //@RequestMapping(value="/web/testJSONP",produces="text/html;charset=utf-8") //@ResponseBody public String testJSONP(String callback) throws JsonProcessingException{ ObjectMapper objectMapper = new ObjectMapper(); //String json = "{'id':'1',\"name\":\"tomcat\"}"; User user = new User(); user.setId(100); user.setName("王思聪吃热狗"); user.setAge(30); String json = objectMapper.writeValueAsString(user); return callback + "(" + json +")"; } //利用工具类形式实现JSONP @RequestMapping(value="/web/testJSONP") @ResponseBody public MappingJacksonValue utilJSONP(String callback){ User user = new User(); user.setId(100); user.setName("王思聪吃热狗"); user.setAge(30); MappingJacksonValue value = new MappingJacksonValue(user); value.setJsonpFunction(callback); return value; } }