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. 线段树 扫描线 L - Atlantis HDU - 1542 M - City Horizon POJ - 3277 N - Paint the Wall HDU - 1543

    学习博客推荐——线段树+扫描线(有关扫描线的理解) 我觉得要注意的几点 1 我的模板线段树的叶子节点存的都是 x[L]~x[L+1] 2 如果没有必要这个lazy 标志是可以不下传的 也就省了一个pu ...

  2. python学习笔记-零碎知识点

    1. 绝对值 abs(-4) 结果: 4 2.

  3. Spring Cloud 学习 之 Spring Cloud Eureka（架构）

    Spring Boot版本:2.1.4.RELEASE Spring Cloud版本:Greenwich.SR1 文章目录 Eureka服务治理基础架构的三个核心要素: 服务治理机制: 服务提供者: ...

  4. LeetCode--Array--Container With Most Water (Medium)

    11. Container With Most Water (Medium)# Given n non-negative integers a1, a2, ..., an , where each r ...

  5. 使用ramdisk启动ubuntu文件系统

    环境 Qemu 4.1 vexpress-ca9 概述 为了减小linux内核的大小,可以把一些外设驱动编译成内核模块,但是在启动ubuntu的时候,需要读取flash,但是此时flash的驱动模块存 ...

  6. 【HBase】HBase和Hue的整合

    目录 一.修改hue.ini配置文件 二.启动HBase的thrift server服务 三.启动Hue 四.页面访问 一.修改hue.ini配置文件 cd /export/servers/hue-3 ...

  7. Owin Katana 的底层源码分析

    最近看了一下开源项目asp.net katana,感觉公开的接口非常的简洁优雅,channel 9 说是受到node.js的启发设计的,Katana是一个比较老的项目,现在已经整合到asp.net c ...

  8. 阿里巴巴泰山版《Java 开发者手册》，也是一份防坑指南

    我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...

  9. GNU ARM 汇编基础

    ARM GNU汇编基础 0 前言 全文补充提醒: 笔者在阅读ARM官方文档及查阅实际的u-boot源码中的汇编代码后,发现了一些不同于ARM官方文档中的汇编语法,查阅相关资料后,才发现主要由于汇编器的 ...

  10. JDBC11 封装+资源配置文件管理

    封装为Utils类+程序资源文件去配置 public class Utils { static Properties p=null; static { p=new Properties(); try ...