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. Java——字节和字符的区别

    字节 1.bit=1  二进制数据0或1 2.byte=8bit  1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字= ...

  2. java读源码 之 map源码分析（HashMap，图解）一

    ​ 开篇之前,先说几句题外话,写博客也一年多了,一直没找到一种好的输出方式,博客质量其实也不高,很多时候都是赶着写出来的,最近也思考了很多,以后的博客也会更注重质量,同时也尽量写的不那么生硬,能让大家 ...

  3. Java抽象类的学习体会与注意事项

    一.定义 抽象类:用abstract声明的class为抽象类. 抽象方法:用abstract声明的方法为抽象方法. 抽象方法特点:只有方法定义,没有方法的实现(函数体) 抽象类的子类都必须实现它的方法 ...

  4. Properties集合与IO流

    package com.itheima.demo07.Prop; import java.io.FileOutputStream; import java.io.FileReader; import ...

  5. [zoj3632]线段树的应用

    题意:f[i] = min(f[i+L]~f[i+R]) + x,计算f数组.从大到小计算即可,用线段树维护一下. #pragma comment(linker, "/STACK:10240 ...

  6. Spring MVC教程——检视阅读

    Spring MVC教程--检视阅读 参考 Spring MVC教程--一点--蓝本 Spring MVC教程--c语言中午网--3.0版本太老了 Spring MVC教程--易百--4.0版本不是通 ...

  7. .Net Core3.0 WebApi 项目框架搭建 四:JWT权限验证

    .Net Core3.0 WebApi 项目框架搭建:目录 什么是JWT 根据维基百科定义,JWT(读作 [/dʒɒt/]),即JSON Web Tokens,是一种基于JSON的.用于在网络上声明某 ...

  8. sublime text 3 关联鼠标右击

    比如有网上有如下方法 https://my.oschina.net/adairs/blog/466777 , 其实一个更简单的方法是运行sublime setup.exe , 直接会有相关提示,下一步 ...

  9. 终于明白了vue使用axios发送post请求时的坑及解决原理

    前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...

  10. Codeforces1183C(C题）Computer Game

    Vova is playing a computer game. There are in total nn turns in the game and Vova really wants to pl ...