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