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>