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

287 阅读1分钟

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;
            top:100px;   
            left:30%;
           
        }
        #search span{
            width:345px;
        }
        input{
              width: 300px;
             height:30px;
             border: 1px solid #FF69B4;
             border-right:none;
             outline-style: none;
            padding-left: 10px;
            float: left;
        }
        #btn{
            background: #FF69B4;
            line-height: 30px;
            width: 50px;
            border:1px solid #FF69B4;
            outline-style: none;
        }
        .city{
            position: absolute;
            top:150px;
            left:35%;
        }
        #box{
            position:absolute;
            margin:50px auto;
            top:170px;
        }
        #box .name0,.name1,.name2,.name3,.name4,.name4,.name5,.name6{
            width:200px;
            height:300px;
            float:left;
            margin:10px;
            background-image:url(timg.jpg);
            background-repeat: no-repeat;
            background-position:center;
            padding: 40px;
        }
        #box  span{
           padding:2px;
           display: block;
           margin:3px;
        }
    </style>
</head>
<body>
    <div id="big">

    <div id="search">
        <input type="text" id="name">
        <button id="btn">搜索</button>
    </div>
    <div class="city"></div>
    <div id="box">

    </div>

</div>


 <script>    

$("#btn").click(function(){
    $(".city").empty(); 
     $("#box").empty(); //将每次添加的标签置空
   var cname=$("input").val(); 获取输入框中的内容(城市名)
//    console.log(cname);
    $.ajax({
            type:"GET",
            dataType:"jsonp",
            url:"https://tianqiapi.com/api?version=v1&appid=41741935&appsecret=1WCZkBa7&city="+ cname +"", //将输入框中的城市名返回,获取信息
            success:function(msg){
                // console.dir(msg);
                var data=msg.data;
                var city=msg.city;
                $(".city").append("<span>"+"当前城市:"+city+"</span>"); //添加当前获取到的城市
				//将获取的数组信息添加到标签中
                for(var i=0;i<data.length;i++){
                   $("#box").append("<div class=\""+"name"+ i +"\"" + "></div>");                
                // $.each(data,function(){
                   var day=data[i].day;
                    var date=data[i].date;
                    var week=data[i].week;
                    // var wea_img=data[i].wea_img;
                    var wea=data[i].wea;
                    var a="name";
                    var air=data[i].air_level; //空气质量
                    var tips=data[i].air_tips;  //建议
                    var win_speed=data[i].win_speed; //风速
                    var tem=data[i].tem;
                    var tem1=data[i].tem1;
                    var tem2=data[i].tem2;
                    $("."+a+i+"").append("<span>"+"天:"+day+"</span>");
                    $("."+a+i+"").append("<span>"+"日期:"+date+"</span>");
                    $("."+a+i+"").append("<span>"+"星期:"+week+"</span>");
                    $("."+a+i+"").append("<span>"+"气温:"+tem+"</span>");
                    $("."+a+i+"").append("<span>"+"最高气温:"+tem1+"</span>");
                    $("."+a+i+"").append("<span>"+"最低气温:"+tem2+"</span>");
                    // $("."+i+"").append("<div>"+"天气:"+wea_img+"</div>");
                    $("."+a+i+"").append("<span>"+"天气:"+wea+"</span>");
                    $("."+a+i+"").append("<span>"+"风速:"+win_speed+"</span>");
                    
                    if(i==0){
                    $("."+a+i+"").append("<span>"+"空气水平:"+air+"</span>");
                    $("."+a+i+"").append("<span>"+"建议:"+tips+"</span>");
                    }
                   
                    // console.log(day);
                // })

                }
               
             
            }
        })

})
 </script>

</body>
</html>