2020-4-16 前端達人
自己寫了段jquery的ajax請求，并輸出到頁面的表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery實現JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">點擊</button>
<div id="container">
<!--每個條目-->
<div class="item">
<div class="item-title">作業名字</div>
<div>
<span class="item-content">創建時間</span>
<span class="item-content">發布老師</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "xxxxxxxxxxx",
type : "GET",
dataType : "json", // 返回的數據類型，設置為JSONP方式
jsonp : 'callback', //指定一個查詢參數名稱來覆蓋默認的 jsonp 回調參數名 callback
jsonpCallback: 'handleResponse', //設置回調函數名
data : {
q : "javascript",
count : 1,
city:'北京'
},
success: function(response, status, xhr){
// console.log('狀態為：' + status + ',狀態是：' + xhr.statusText);
// console.log(response);
var group = response.hourly_forecast;
console.log(group,111111111)
console.log(group.length,222222222222)
//拼接字符串
var str = '';
//對數據做遍歷，拼接到頁面顯示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].date +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].hum +'</span>'+
'<span class="item-content">'+ group[i].pop +'</span>'+
'</div>'+
'</div>';
}
//放入頁面的容器顯示
$('#container').html(str);
}
});
});
});
function handleResponse(response){
// 對response數據進行操作代碼
alert("jsonp success!");
}
</script>
</html>
一、處理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經實現了跨域訪問。但ie10以下不支持
只需要在服務端填上響應頭：
header("Access-Control-Allow-Origin:*");
/*星號表示所有的域都可以接受，*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP
原理：
ajax本身是不可以跨域的，
通過產生一個script標簽來實現跨域。因為script標簽的src屬性是沒有跨域的限制的。
其實設置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒什么關系了，取而代之的則是JSONP協議。JSONP是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。
ajax的跨域寫法：
（其余寫法和不跨域的一樣）：
比如