- A+
所属分类：Web前端
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"}])
package com.abc.demo.controller; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; @RequestMapping("/test") @Controller public class TestController { @RequestMapping("/getStudents") public void getStudents(String callback, HttpServletResponse response) throws IOException { //返回前台的结果数据 List<Map<String, String>> result = new ArrayList<>(); Map<String, String> map = new HashMap<>(); map.put("name", "李白"); map.put("age", "20"); result.add(map); map = new HashMap<>(); map.put("name", "杜甫"); map.put("age", "21"); result.add(map); response.setCharacterEncoding("utf-8"); String javascript = callback + "(" + new ObjectMapper().writeValueAsString(result) + ")"; response.getWriter().println(javascript); } }
3、前台实现
3.1、原生写法（testJsonp.html）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSONP 测试</title> </head> <body> <div id="students"></div> </body> <script type="text/javascript" src="./jquery-1.12.4.min.js"></script> <script type="text/javascript"> </script> <script type="text/javascript"> function showStudents(result) { let html = '<ul>'; for(let i = 0; i < result.length; i++) { html += '<li>姓名：' + result[i].name + ',年龄：' + result[i].age + '</li>'; } html += '</ul>'; document.getElementById('students').innerHTML = html; } </script> <script type="text/javascript" src="http://localhost:8080/test/getStudents?callback=showStudents"></script> </html>
3.2、Jquery 写法（testJsonpJquery.html）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSONP 测试(Jquery)</title> </head> <body> <div id="students"></div> </body> <script type="text/javascript" src="./jquery-1.12.4.min.js"></script> <script type="text/javascript"> $.getJSON("http://localhost:8080/test/getStudents?callback=?", function(result) { let html = '<ul>'; for(let i = 0; i < result.length; i++) { html += '<li>姓名：' + result[i].name + ',年龄：' + result[i].age + '</li>'; } html += '</ul>'; document.getElementById('students').innerHTML = html; }); </script> </html>
3、测试
用浏览器直接打开 html 文件即可
