发布：2023/12/7 15:29:02作者：大数据 来源：大数据 浏览次数：450
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url:"http://baibaota.com/json/student.json", type:"get", dataType:"jsonp", //jsonp: "callback", jsonpCallback: "callback",//此名称必须与获取的json字符串里的相同 beforeSend:function(xhr){ $("#div2").html("加载中..."); }, complete:function(xhr,status){ $("#div2").html(status); }, success:function(result,status,xhr){ console.log(JSON.stringify(result)); $("#div1").html(JSON.stringify(result)); }}); }); }); </script> </head> <body style=""> <div id="div2"></div> <div id="div1"><h2>原文本内容</h2></div> <button>提交</button> </body></html> |
json文件abc.json，callback与上面的参数jsonpCallback:后面值一样才可以。
|
1 2 3 |
callback({ "student":"hao123" }) |
知识补充：
什么是跨域访问？
跨域访问主要针对的是JS访问（但如果Webapi是用httprequest或相应工具postman访问都是可以的。），主要是JavaScript本身不允许跨域访问，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
