jquery，ajax請求并處理跨域

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>

jquery中ajax處理跨域的三大方式

一、處理跨域的方式：

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ū)懛ǎ?        

        
            （其余寫法和不跨域的一樣）：
        

        
            比如