JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
(编辑:jimmy 日期: 2024/11/15 浏览:3 次 )
通过JQuery可以跨域获取JSON数据,但必须弄清楚的是,JQuery不可以跨域获取任意JSON格式的数据,必须要通过服务端输出特定的针对JQuery跨域读取的JSON数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用。
JQuery获取同域的JSON数据
首先引用jQuery库文件:
<script src="/UploadFiles/2021-04-02/jquery.min.js">
jQuery代码:
var url="http://localhost:8000/user.php"; $(function(){ $.getJSON(url,function(data){ alert (data.name); }) });
服务器代码(PHP):
<"name" => "xiaoming", "pass" => "123456" ); echo json_encode($arr); "name":"xiaoming","pass":123456}JQuery获取跨域的JSON数据
首先引用jQuery库文件:
<script src="/UploadFiles/2021-04-02/jquery.min.js">
jQuery代码:
var url="http://localhost:8000/user.php"; $(function(){ $.getJSON(url,function(data){ alert (data.name); }) });服务器代码(PHP):
<"name" => "xiaoming", "pass" => "123456" ); echo $_GET['jsoncallback']."(".json_encode($arr).")"; "name":"xiaoming","pass":123456})说明,jQuery传入值每次都不一样。
JQuery获取同域和跨域JSON数据的区别
从上述两个例子看到,JQuery获取同域和跨域JSON数据的区别有两点:
1)jQuery写法不同,跨域时要多加一个参数“jsoncallback="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
jQuery代码:
<script type="text/javascript"> $(function(){ $.ajax({ type: 'get', url: 'http://localhost:8000/user.php"jsoncallback", success: function(data) { alert("用户名:"+ data.name+" 密码:"+ data.pass); } }); }) </script>特别注意,dataType 是 jsonp 而不是 json 。
下一篇:VsCode新建VueJs项目的详细步骤