jquery，ajax请求并处理跨域

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>

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

一、处理跨域的方式：

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的跨域写法：

（其余写法和不跨域的一样）：

比如

« 如果使用 JavaScript 原型实现继承设计中该如何运用材质？ »

jquery，ajax请求并处理跨域

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

分类

日历

链接

个人资料

存档