ajax请求使用，解决跨域的方法

1.jQuery中的ajax

$.ajax({
    url:'地址',
    type:'get/post',
    data:{},
    dataType:'json/jsonp',
    success:function(res){
        //请求成功，接收返回值
    }
})

2.代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用ajax</title>
</head>

<body>
    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script>
        $.ajax({

                url: 'https://a.huodong.mi.com/flashsale/getslideshow',
                type: 'get',
                // 解决跨域
                dataType: 'jsonp',
                success: function(res) {
                    console.log(res)
                }
            })
            // $.get('http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php', function(res) {
            //     console.log(res)
            // })
    </script>
</body>

</html>

ajax跨域

ajax不能跨域请求
- 两个网址：协议主域号端口号完全相同时，这时两个网址完全相同(任意其一不同，即为跨域请求)
解决跨域：
- 1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
- 2.cors:需要后台配合
- 3.后台设置允许所有或指定网址能直接访问
简写形式：
- $.get(url,data,function(res){})
- $.post(url,data,function(res){})

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实际操作ajax</title>
</head>

<body>
    <ul id="list">

    </ul>
    <button id="btn">下一页</button>
    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script>
        var nowpage = 0;

        function createPage(nowpage) {
            $.ajax({
                url: 'https://sclub.jd.com/comment/productPageComments.action?productId=5089275&score=0&sortType=5&pageSize=10&isShadowSku=0&rid=0&fold=1',
                type: 'get',
                data: {
                    // 将页数拿出来
                    page: nowpage
                },
                // 解决跨域
                dataType: 'jsonp',
                success: function(res) {
                    console.log(res)
                    $("#list").empty()
                    for (var i = 0; i < res.comments.length; i++) {
                        if (res.comments[i]['userImage'].indexOf('http') == -1) {
                            res.comments[i]['userImage'] = "https://" + res.comments[i]['userImage']
                        }
                        $("<li><img src=" + res.comments[i]['userImage'] +
                            "alt=''/></li><span>" + res.comments[i]['nickname'] +
                            "</span><p>" + res.comments[i]['content'] + "</p>").appendTo("#list")
                    }
                }
            })
        }
        createPage(nowpage)
            // 点击下一页，切换页面内容
        $('#btn').click(function() {
                nowpage++
                createPage(nowpage)
            })
            // https://sclub.jd.com/comment/productPageComments.action?
            // productId=5089275&score=0&sortType=5&page=2&pageSize=10&isShadowSku=0&rid=0&fold=1
    </script>
</body>

</html>