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. 前缀和（P2697 宝石串）

    前言 每次做出来什么本来做不出的题目,就忍不住记录一下.不过大多时候隔几天来看,就发现,啊,我当时只是做了一道这么弱智的题目呀,哈哈.前缀和确实不算太难.. 传送门 题目大意: 给你一个字符串只含G和 ...

  2. while(scanf("%d",&n)!=EOF) / while(cin>>n)终止问题

    问题的发现:(想要看干货可以直接跳过这段) 我最近刚了解到关于栈的用法,于是按照参考书寻找代码,并把它敲到电脑上.编译运行代码后发现无法终止,在网上查找各种资料,总结如下. 因为我的电脑是Window ...

  3. TD-LTE华为 DBS3900数据配置实践 典型案例

    案例:华为 DBS3900 双基站二扇区配置(同频切换) 一.数据配置前的硬件准备: HW-DBS3900: (1#基站名称) FAN (风扇),安装在 16#槽位: LBBP (基带处理单板),安装 ...

  4. ES[7.6.x]学习笔记（八）数据的增删改

    在前面几节的内容中,我们学习索引.字段映射.分析器等,这些都是使用ES的基础,就像在数据库中创建表一样,基础工作做好以后,我们就要真正的使用它了,这一节我们要看看怎么向索引里写入数据.修改数据.删除数 ...

  5. Python 为什么抛弃累赘的花括号，使用缩进来划分代码块？

    大家好,这是"Python为什么"系列节目的文字稿(文末有观看地址). 本期话题:Python 为什么使用缩进来划分代码块,而不像其它语言使用花括号 {} 或者 "end ...

  6. 帝国cms 批量删除包含关键字的 内容

    删除包含关键字的 内容delete from www_kaifatu_com_ecms_news where playurl like '%关键字%'

  7. CentOS7编译和安装GCC7.5

    CentOS7编译和安装GCC7.5 一.    环境介绍: CentOS7 虚拟机连上了互联网(为什么要强调这点呢,因为CentOS7每次进入系统,都需要手动点击右上角的Connect,才能连上互联 ...

  8. spring boot+mybatis搭建项目

    一.创建spring boot项目 1.File->New->Project 2.选择 Spring Initializr ,然后选择默认的 url 点击[Next]: 3.修改项目信息 ...

  9. How To Mitigate Slow HTTP DoS Attacks in Apache HTTP Server

    http://www.acunetix.com/blog/web-security-zone/articles/slow-http-dos-attacks-mitigate-apache-http-s ...

  10. 实验十四 Swing图形界面组件

    实验十四  Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1) 掌握GUI布局管理器用法: (2) 掌握各类Java Swing组件用途及常用API: 2.实验内容和 ...