jsonp(json with padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资源，即跨域读取数据。jsonp 的优势在于支持老式浏览器，兼容性好（兼容低版本ie），缺点是只支持 get 请求，不支持 post 请求。本文主要介绍 jsonp 的使用方法，文中所使用到的软件版本：chrome90.0.4430.212、jquery 1.12.4、spring boot2.4.4、jdk1.8.0_181。
网页通过添加一个<script> 元素，向服务器请求 json 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。
假设访问 : ht铠甲勇士图片大全tp://localhost:8080/test/getstudents?callback=sh匆匆那年完整版owstudents
假设期望返回数据：[{“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.rvlet.http.httprvletrespon;import java.io.ioexception;import java.util.arraylist;import java.util.hashmap;import java.util.list;import java.util.map;@requestmapping("/test")@controllerpublic class testcontroller { @requestmapping("/getstudents") public void getstudents(string callback, httprvletrespon respon) 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); respon.tcharacterencoding("utf-8"); string javascript = callback + "(" + new objectmapper().writevalueasstring(result) + ")"; respon.getwriter().println(javascript); }}<!狼和羊的故事doctype html><html><head><meta http-equiv="content-type" content="text/html; chart=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><!doctype html><html><幸福的日子;head><meta http-equiv="content-type" content="text/html; chart=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>启动后台 spring boot 应用，用浏览器直接打开 html 文件即可。
本文发布于:2023-04-03 21:17:35，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/bb65d01c2e72c56325a88bb177dc6ee8.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：跨域访问方法介绍(6)–使用 JSONP.doc
本文 PDF 下载地址：跨域访问方法介绍(6)–使用 JSONP.pdf
| 留言与评论（共有 0 条评论） |
