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>

jQuery-ajax请求使用的更多相关文章

  1. jquery ajax请求方式与提示用户正在处理请稍等，等待数据返回时loading的显示

    1.jquery ajax请求方式与提示用户正在处理请稍等 为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示.我们可通过设置$.ajax()下的参数beforeSend()来实 ...

  2. jQuery ajax 请求php遍历json数组到table中

    html代码(test.html),js在html底部 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  4. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  5. 原生js，jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  6. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  7. jquery Ajax请求中显示Loading...

    jquery Ajax请求中显示Loading... $('#btnTest').click(function(){      $.ajax({           url ---- ,根据你需要设置 ...

  8. 二、jQuery Ajax请求

    一.Ajax请求 1.jQuery Ajax请求 let ajaxTimeOut = $.ajax({ //将网络请求事件赋值给变量ajaxTimeOut url: "/api_v1.1/a ...

  9. jquery ajax 请求参数详细说明 及 实例

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  10. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

随机推荐

  1. Educational Codeforces Round 83 E. Array Shrinking

    E. Array Shrinking 题目大意: 给你一个大小是n的序列,相邻的序列如果相等,则可以合并,合并之后的值等于原来的值加1. 求:合并之后最小的序列的和. 题解: 这个数据范围和这个相邻的 ...

  2. ssm整合后打印日志查看执行sql语句

    mybatis.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configura ...

  3. MySQL——关于索引的总结

    索引的优缺点 首先说说索引的优点:最大的好处无疑就算提高查询效率.有的索引还能保证数据的唯一性,比如唯一索引. 而它的坏处很明显:索引也是文件,我们在创建索引时,也会创建额外的文件,所以会占用一些硬盘 ...

  4. GP1UM26(78)1RK远程红外遥控接收IC数据手册学习

    1.Features 该系列IC具有多种BMP带通频率可供选择,典型的GP1UM261RK带通频率为38KHz,内部的前置放大器等放大电路工作频率均为38KHz. Compact紧凑型,体积小 2.i ...

  5. chrom浏览器总是将http请求强制转换成https请求

    chrome://net-internals/#hsts 中 Delete domain security policies 输入该站点,将将该站点删除一下就OK. 其他浏览器: Chrome 浏览器 ...

  6. PHPExcel生成Excel文件---提示导出文件或者文件扩展名不一致，或导出的文件或文件扩展名无效

    $data = Db::name('shop_cart')->where('phone','15555555555')->select(); $objPHPExcel = new PHPE ...

  7. Android CodeReview 些许总结

    CodeReview些许总结 1:使用Handler的时候,使用handler.post(Runnable);,hanler与类尽量保持弱引用关系,或者使用静态的handler对象 public Ha ...

  8. Dynamics 365 联系人Contact的快速创建窗体，如何知道父窗体是哪个实体，通过window.top.parent.Xrm.Page.getUrl()可以知道父窗体的URL

    Dynamics 365 联系人Contact的快速创建窗体,如何知道父窗体是哪个实体?相信有人会遇到过这种头疼的问题,我这里分享一种方式: 在contact快速创建窗体的onload时间执行如下代码 ...

  9. AI技术原理|机器学习算法

    摘要 机器学习算法分类:监督学习.半监督学习.无监督学习.强化学习 基本的机器学习算法:线性回归.支持向量机(SVM).最近邻居(KNN).逻辑回归.决策树.k平均.随机森林.朴素贝叶斯.降维.梯度增 ...

  10. 数据库常见考题查询SQL

    1.列出各个部门中工资高于本部门的平均工资的员工数和部门号,并按部门号排序 执行查询: select count(*), a.deptid from employee a groub by depti ...