经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
跨域访问方法介绍(6)--使用 JSONP
来源:cnblogs  作者:咏吟  时间:2021/6/28 9:12:21  对本文有异议

JSONP(JSON with Padding) 是 JSON 的一种"使用模式",可以让网页从别的域名(网站)那获取资源,即跨域读取数据。JSONP 的优势在于支持老式浏览器,兼容性好(兼容低版本IE),缺点是只支持 GET 请求,不支持 POST 请求。本文主要介绍 JSONP 的使用方法,文中所使用到的软件版本:Chrome 90.0.4430.212、jquery 1.12.4、Spring Boot 2.4.4、jdk1.8.0_181。

1、实现思路

网页通过添加一个 <script> 元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。

2、服务端实现(Spring 版)

假设访问 : http://localhost:8080/test/getStudents?callback=showStudents
假设期望返回数据:[{"name":"李白","age":"20"},{"name":"杜甫","age":"21"}]
真正返回到客户端的数据为: showStudents([{"name":"李白","age":"20"},{"name":"杜甫","age":"21"}])

  1. package com.abc.demo.controller;
  2. import com.fasterxml.jackson.databind.ObjectMapper;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  5. import javax.servlet.http.HttpServletResponse;
  6. import java.io.IOException;
  7. import java.util.ArrayList;
  8. import java.util.HashMap;
  9. import java.util.List;
  10. import java.util.Map;
  11. @RequestMapping("/test")
  12. @Controller
  13. public class TestController {
  14. @RequestMapping("/getStudents")
  15. public void getStudents(String callback, HttpServletResponse response) throws IOException {
  16. //返回前台的结果数据
  17. List<Map<String, String>> result = new ArrayList<>();
  18. Map<String, String> map = new HashMap<>();
  19. map.put("name", "李白");
  20. map.put("age", "20");
  21. result.add(map);
  22. map = new HashMap<>();
  23. map.put("name", "杜甫");
  24. map.put("age", "21");
  25. result.add(map);
  26. response.setCharacterEncoding("utf-8");
  27. String javascript = callback + "(" + new ObjectMapper().writeValueAsString(result) + ")";
  28. response.getWriter().println(javascript);
  29. }
  30. }

3、前台实现

3.1、原生写法(testJsonp.html)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JSONP 测试</title>
  6.  
  7. </head>
  8. <body>
  9. <div id="students"></div>
  10. </body>
  11. <script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
  12. <script type="text/javascript">
  13. </script>
  14. <script type="text/javascript">
  15. function showStudents(result) {
  16. let html = '<ul>';
  17. for(let i = 0; i < result.length; i++) {
  18. html += '<li>姓名:' + result[i].name + ',年龄:' + result[i].age + '</li>';
  19. }
  20. html += '</ul>';
  21. document.getElementById('students').innerHTML = html;
  22. }
  23. </script>
  24. <script type="text/javascript" src="http://localhost:8080/test/getStudents?callback=showStudents"></script>
  25. </html>

3.2、Jquery 写法(testJsonpJquery.html)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>JSONP 测试(Jquery)</title>
  6.  
  7. </head>
  8. <body>
  9. <div id="students"></div>
  10. </body>
  11. <script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
  12. <script type="text/javascript">
  13. $.getJSON("http://localhost:8080/test/getStudents?callback=?", function(result) {
  14. let html = '<ul>';
  15. for(let i = 0; i < result.length; i++) {
  16. html += '<li>姓名:' + result[i].name + ',年龄:' + result[i].age + '</li>';
  17. }
  18. html += '</ul>';
  19. document.getElementById('students').innerHTML = html;
  20. });
  21. </script>
  22. </html>

3、测试

用浏览器直接打开 html 文件即可

 

原文链接:http://www.cnblogs.com/wuyongyin/p/14835918.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号