json跨域问题

二木林叫森

于 2020-07-27 15:58:21 发布

阅读量375

点赞数 2

文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/weixin_43686867/article/details/107613616

版权

JSON的跨域问题

简介
实现原理
天气查询的DEMO
- 效果
- 效果

作者凌杰林

参考链接：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ynnrA3xJ-1595836563884)(https://blog.csdn.net/upxiaofeng/article/details/51095825)]

简介

在我们使用ajax访问其它服务器上的数据的时候，经常会出现跨域问题。

原因：JavaScript语言安全限制的同源策略。所谓同源策略,是指一段脚本只能读取同一来源的窗口和文档的属性，同一性指的是同一个主机名，同一个协议，同一个端口号的组合。

实现原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function download(result) {
            alert("下载到的数据：" + result);
        }
    </script>
    <script src="data.js"></script>
</head>

<body>

</body>

</html>

download("i id dji");

data.js的代码

在HTML中，src属性是可以跨域的url，从而实现跨域访问。

所以我们在HTML页面中定义要返回的download函数，再在后面创建一个sricpt标签，设置它的src属性，返回时调用的download函数，里面的参数就是所需要的信息，。

天气查询的DEMO

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NgSK55VO-1595836563889)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200727154922895.png)]

接口https://api.asilu.com/weather/?city=广州&callback=download

上面返回的是一个对象，可以获取需要的city和weather等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>天气查询</title>
    <style>
        #info {
            display: none;
        }
    </style>
    <script>
        function download(data) {
            var oT1 = document.getElementById("t1");
            var oInfo = document.getElementById("info");
            var oInfo1 = document.getElementById("info1");
            oInfo.style.display = 'block';
            oInfo1.innerHTML = `城市：${data.city}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PM2.5指数：${data.pm25}`;
            var arr = data.weather;
            var str = ``;
            for (var i = 0; i < arr.length; i++) {
                str += `<tr>
                            <td>${arr[i].date}</td>
                            <td>${arr[i].weather}</td>
                            <td>${arr[i].wind}</td>
                            <td>${arr[i].temp}</td>
                        </tr>`;
            }
            oT1.innerHTML = str;
        }
    </script>
    <script>
        window.onload = function() {
            var oSearch = document.getElementById("search");
            var oCity = document.getElementById("city");
            oSearch.onclick = function() {
                if (!oCity.value) {
                    alert("请输入城市!");
                } else {
                    var oScript = document.createElement("script");
                    oScript.src = `https://api.asilu.com/weather/?city=${oCity.value}&callback=download`;
                    document.body.appendChild(oScript);
                }
            }
        }
    </script>
</head>
<div class="container">
    <div class='panel panel-primary'>
        <div class='panel-heading'>
            <h2>天气查询&nbsp;&nbsp;<span id='info1'></span></h2>

        </div>
        <div class='panel-body'>
            <div class="form-group">
                <label for="city">城市名字</label>
                <input type="text" class="form-control" id="city">
            </div>
            <div class="form-group ">
                <button id="search" class='btn btn-primary form-control'>提交</button>
            </div>
        </div>
        <div id='info'>
            <div class="panel-footer">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>天气</th>
                            <th>风向</th>
                            <th>气温</th>
                        </tr>
                    </thead>
                    <tbody id='t1'>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<body>

</body>

</html>

步骤：在html页面中要创建一个带有src属性的script标签，该标签的上一个script里面定义的download函数可以对数据进行处理。

效果

```

步骤：在html页面中要创建一个带有src属性的script标签，上面定义的download函数可以对数据进行处理。

效果

在这里插入图片描述

二木林叫森

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
json跨域问题

JSON的跨域问题简介实现原理天气查询的DEMO效果效果作者凌杰林参考链接：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ynnrA3xJ-1595836563884)(https://blog.csdn.net/upxiaofeng/article/details/51095825)]简介在我们使用ajax访问其它服务其上的数据是候，经常会出现跨域问题。原因：由于JavaScript语言安全限制的同源策略造成的，所谓同源策略,是指一段脚本只能读取同一来源的窗口
复制链接

扫一扫