jsonp跨域读取数据(利用api获取天气预报)

最新推荐文章于 2022-09-06 09:47:06 发布

空谷丶幽兰

最新推荐文章于 2022-09-06 09:47:06 发布

阅读量804

点赞数 2

分类专栏： ajax

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/109152448

版权

1.jsonp是json的一种“使用模式”，可以让网页从别的网站那获取资料，即跨域读取数据。
2.ajax请求，原则上不允许跨域访问资源（特殊情况下可以跨域）
3.HTML本身没有跨域问题
4.script标签的src属性，允许指向跨域的资源
5.jsonp的核心则是动态添加script标签来调用服务器提供的js脚本
6.js中的script标签中的代码可以跨代码块来执行，script中的src可以指向任何地址
7.回环地址：127.0.0.1
8.所有支持JavaScript的浏览器都会使用同源策略这个安全策略，同源策略指域名，协议，端口相同。
9.jsonp是json with padding的略称，它允许在服务器端集成Script tags返回至客户端，通过JavaScript callback的形式实现跨域访问
（这仅仅是jsonp的简单实现形式）
10.jsonp只支持get请求，ajax支持get请求和post请求

 $.ajax({
   
            type:"GET",
            dataType:"jsonp",
            url:"https://tianqiapi.com/api?version=v1&appid=41741935&appsecret=1WCZkBa7",
            success:function(msg){
   
            console.dir(msg)
            }

获取天气预报效果：

在这里插入图片描述

实现步骤：

		1.给“搜索”按钮绑定点击事件，点击后
		2.利用jsonp跨域访问数据获取天气预报api中的数据
		3.对获取的数据中的数组对象进行遍历并动态添加到标签中
		4.每次点击都要给显示的内容标签置空（用jQuery中的empty方法,防止叠加）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery1.7.2.js"></script>
    <style>
        *{
    
            margin:0px;
            padding:0px;
        }
        #big{
    
            position: relative;
           width:1500px;
           height: 1200px;
          margin-left:100px;
        }
        #search{
    
            position:absolute;
            width:365px;

最低0.47元/天解锁文章

空谷丶幽兰

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域读取数据(利用api获取天气预报)

1.jsonp是json的一种“使用模式”，可以让网页从别的网站那获取资料，即跨域读取数据。2.ajax请求，原则上不允许跨域访问资源（特殊情况下可以跨域）3.HTML本身没有跨域问题4.script标签的src属性，允许指向跨域的资源5.jsonp的核心则是动态添加script标签来调用服务器提供的js脚本6.js中的script标签中的代码可以跨代码块来执行，script中的src可以指向任何地址7.回环地址：127.0.0.18....
复制链接

扫一扫

专栏目录