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. Qt for Android (三) 打开Android相册并选一个图片进行显示

    Qt for Android (三) 这两天弄了一下android相册的相关功能.还是花了挺长时间的,这里总结一下,避免以后再踩坑.同时也在这篇文章里面补齐一些android开发的基础支持 打开And ...

  2. （2）.mybatis单元测试（junit测试）

    一.Junit使用步骤:1.创建测试目录,(src.测试目录是test)2.在测试目录test中创建与src中相同的包名3.为需要测试的类创建测试类,例如:UsersMapper,测试类是UsersM ...

  3. 如何将项目上传至GitHub？

    心血来潮的一天,突然想写点什么哈哈哈哈. 那就写写如何将项目上传到GitHub(矫情,上传个项目还要写个文章) 第一步:下载Git https://git-scm.com/download/win 下 ...

  4. C# 数据操作系列 - 3. ADO.NET 离线查询

    0. 前言 在上一篇中,我故意留下了查询的示范没讲.虽然说可以通过以下代码获取一个DataReader: IDataReader reader = command.ExecuteReader(); 然 ...

  5. 变分深度嵌入(Variational Deep Embedding, VaDE)

    变分深度嵌入(Variational Deep Embedding, VaDE) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 这篇博文主要是对论文“ ...

  6. acm的一些头文件和调试代码

    个人觉得单步调试麻烦且费时间,所以我两年时间里F4+watch基本没怎么用过,但由于"查看变量的值"这个需求总是存在的,并且调试时通常需要显示很多东西,printf写起来又比较蛋疼 ...

  7. 2020网鼎杯 白虎组reverse：hero

    主函数,当bossexist的值不为0时,while循环dround()函数,循环结束输出flag outflag()函数的flag值由6段数据拼凑而成 while循环的dround()函数有三个选择 ...

  8. CSS像素与绝对像素

    之前在电视的webview上投放广告页面时,遇到了个问题,就是视窗大小和文档大小不一致.最后发现原来有CSS Pixel这个概念,搜集了一些资料,希望能把这个问题捋捋清楚. 首先提出一个大家常常会忽略 ...

  9. Flutter不能做什么：局限性

    老孟导读:您在网络上一定看过很多Flutter如何优秀的.如何完美的文章,而这篇文章将会告诉你Flutter不能做什么,注意并不是Flutter的缺点,比如第三方插件少.Dart不流行等,在我看来这都 ...

  10. Spring Cloud 系列之 Consul 配置中心

    前面我们已经学习过 Spring Cloud Config 了: Spring Cloud 系列之 Config 配置中心(一) Spring Cloud 系列之 Config 配置中心(二) Spr ...