【Ajax】原生 Ajax 的使用

已于 2023-07-13 22:33:47 修改
阅读量423 收藏
点赞数
分类专栏： Network 文章标签： ajax javascript ecmascript
于 2021-10-29 00:19:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_H/article/details/121026134
版权

基本使用

使用 express 部署服务端

  1. 安装 node（官网下载，无脑安装即可）
  2. 安装 express：npm i express
  3. 编写代码，部署服务器：
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.get('/', (request, response) => {
    // 设置响应体
    response.send('hello express');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');
});

在浏览器登陆 127.0.0.1:8000 即可查看响应体内容


使用原生 Ajax 发起请求

  1. 创建 Ajax 对象：
let xhr = new XMLHttpRequest();

  1. 初始化 HTTP 请求：xhr.open(requestType, URL[, asyn])
    1. requestType：表示请求的类型，常见的有 GET、POST、PUT、DELETE 等。
    2. URL：表示要发送请求的 URL。
    3. asyn：表示请求是否是异步的，默认为 true（异步）。
      如果设为 false（同步），则在收到响应之前，JavaScript 代码会被阻塞，页面处于不响应状态。
xhr.open('GET', 'http://127.0.0.1:8000');

  1. 发送 HTTP 请求：xhr.send()
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
xhr.send(JSON.stringify({ name: 'John', age: 30 })); // 添加请求体

  1. 设置事件监听器（如 xhr.onreadystatechange、xhr.onload、xhr.onerror 等）来处理响应和错误：

xhr.onreadystatechange：当 XMLHttpRequest 对象的 readyState 属性发生变化时触发。readyState 表示请求的状态，具体值如下：

  • 0：未初始化，XMLHttpRequest 对象已创建，但尚未调用 open() 方法。
  • 1：已打开，open() 方法已调用，但尚未调用 send() 方法。
  • 2：已发送，send() 方法已调用，但尚未接收到响应。
  • 3：接收中，正在接收响应数据。
  • 4：已完成，响应数据接收完毕。

可以根据 readyState 的值来执行相应的操作，例如在 xhr.readyState 为 4 时，响应数据已完全接收，可以处理响应。

xhr.onreadystatechange = function () {
    // 判断 readyState 的属性值是否为 4, 响应的状态码是否为 200
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = xhr.responseText; // 获取响应的文本数据
        console.log(response);
    }
};

xhr.onload：当 XMLHttpRequest 对象成功接收到完整的响应时触发。用于处理成功的请求，可以获取响应数据和处理响应。

xhr.onload = function () {
    // 判断响应的状态码是否为 200
    if (xhr.status === 200) {
        var response = xhr.responseText; // 获取响应的文本数据
        console.log(response);
    }
};

xhr.onerror：当 XMLHttpRequest 对象在发送请求期间发生错误时触发。用于处理请求失败的情况，如网络错误或服务器错误。

xhr.onerror = function () {
    console.log('请求发生错误');
};

  1. 完整实例：
// 点击 box 发送 Ajax 请求
box.onclick = function () {
    // 1. 创建 Ajax 对象
    let xhr = new XMLHttpRequest();

    // 2. 初始化 HTTP 请求
    xhr.open('GET', 'http://127.0.0.1:8000');

    // 3. 发送 HTTP 请求
    xhr.send();

    // 4. 监听 readystatechange 事件, 获取服务端返回的数据
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = xhr.responseText;
            console.log(response);
        }
    };

    // 5. 处理请求失败的情况
    xhr.onerror = function () {
        console.log('请求发生错误');
    };
};

可获取的响应信息有：

  1. xhr.status：状态码
  2. xhr.statusText：状态字符串
  3. xhr.getAllResponseHeaders()：所有响应头
  4. xhr.response：响应体
  5. xhr.responseText：响应的文本数据
  6. ……



基本操作

GET 请求

  1. 使用 express 部署服务器：
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.get('/server', (request, response) => {
    // 设置响应头, 解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('GET: hello ajax');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');
});

  1. 在客户端中发送 GET 请求：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ajax GET 请求</title>
    </head>

    <body>
        <button>点击发送请求</button>
        <script>
            let btn = document.getElementsByTagName('button')[0];
            let result = document.getElementById('result');
            btn.addEventListener('click', () => {
                // 1. 创建 Ajax 对象
                let xhr = new XMLHttpRequest();

                // 2. 初始化 HTTP 请求
                xhr.open('GET', 'http://127.0.0.1:8000/server');

                // 3. 发送 HTTP 请求
                xhr.send();

                // 4. 监听 readystatechange 事件, 获取服务端返回的数据
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.status); // 状态码 - 200
                        console.log(xhr.statusText); // 状态字符串 - OK
                        console.log(xhr.getAllResponseHeaders()); // 所有响应头 - content-length: 10 …
                        console.log(xhr.response); // 响应体 - hello ajax
                    }
                });
            });
        </script>
    </body>
</html>

GET 请求的传参方式：
在 URL 后面用 ? 分隔，写上需要传递的键值对：xhr.open('GET', 'http://127.0.0.1:8000/server?name=superman')


POST 请求

  1. 使用 express 部署服务器：
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.post('/server', (request, response) => {
    // 设置响应头，解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('POST: hello ajax');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');
});

  1. 在客户端上发送 POST 请求：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ajax POST 请求</title>
        <style>
            #result {
                height: 100px;
                width: 100px;
                background: lightcyan;
            }
        </style>
    </head>

    <body>
        <div id="result"></div>
        <script>
            let result = document.getElementById('result');

            // 鼠标移入事件
            result.addEventListener('mouseenter', () => {
                // 1. 创建 Ajax 对象
                let xhr = new XMLHttpRequest();

                // 2. 初始化 HTTP 请求
                xhr.open('POST', 'http://127.0.0.1:8000/server');

                // 3. 发送 HTTP 请求
                xhr.send();

                // 4. 监听 readystatechange 事件, 获取服务端返回的数据
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        result.innerHTML = xhr.response;
                    }
                });
            });
        </script>
    </body>
</html>

POST 请求的传参方式：
给 send() 传入字符串参数：xhr.send('name=superman&age=18&gender=male');


设置请求头

  1. 通过 express 部署服务端
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.all('/server', (request, response) => {
    // 设置响应头，解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');

    // 设置响应头，以接收自定义请求头
    response.setHeader('Access-Control-Allow-Headers', '*');

    // 设置响应体
    response.send('post: hello ajax');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');
});

  1. 在客户端上发送请求：

xhr.setRequestHeader(header, value)：用于设置 HTTP 请求头部，此方法必须在 open() 和 send() 之间调用。
header：设置请求体内容的类型，为 Content-type：请求体内容会被解释：name=superman&age=18 → name: superman age: 21。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ajax POST 请求</title>
        <style>
            #result {
                height: 100px;
                width: 100px;
                background: lightcyan;
            }
        </style>
    </head>

    <body>
        <div id="result"></div>
        <script>
            let result = document.getElementById('result');

            result.addEventListener('mouseenter', () => {
                // 1. 创建 Ajax 对象
                let xhr = new XMLHttpRequest();

                // 2. 初始化 HTTP 请求
                xhr.open('POST', 'http://127.0.0.1:8000/server');

                // 设置请求头 Content-type
                xhr.setRequestHeader(
                    'Content-type',
                    'application/x-www-form-urlencoded'
                );
                // 设置自定义的请求头 id
                xhr.setRequestHeader('id', '001');
                // 设置自定义的请求头时需要在响应体中设置一些操作,以接收自定义请求头

                // 3. 发送 HTTP 请求
                xhr.send('name=superman&age=21&gender=male');

                // 4. 监听 readystatechange 事件, 获取服务端返回的数据
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        result.innerHTML = xhr.response;
                    }
                });
            });
        </script>
    </body>
</html>

响应 JSON 数据

  1. 通过 express 部署服务端
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.get('/json-server', (request, response) => {
    // 设置响应头，解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');

    // 设置响应体，发送指定数据到页面
    let content = { name: 'superman' };
    response.send(JSON.stringify(content));
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');
});

  1. 在页面上发送 GET 请求：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ajax JSON 请求</title>
        <style>
            #result {
                height: 100px;
                width: 100px;
                background: lightcyan;
            }
        </style>
    </head>

    <body>
        <div id="result"></div>
        <script>
            let result = document.getElementById('result');

            window.addEventListener('keydown', () => {
                // 1. 创建 Ajax 对象
                const xhr = new XMLHttpRequest();

                // ② 自动转换 (设置响应体类型)
                xhr.responseType = 'json';

                // 2. 初始化 HTTP 请求
                xhr.open('GET', 'http://127.0.0.1:8000/json-server'); // 这里无参数需要发送，数据已从服务端获取

                // 3. 发送 HTTP 请求
                xhr.send();

                // 4. 监听 readystatechange 事件, 获取服务端返回的数据
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // ① 手动转换
                        // result.innerHTML = JSON.parse(xhr.response).name;

                        // ② 自动转换 (设置响应)
                        result.innerHTML = xhr.response.name;
                    }
                });
            });
        </script>
    </body>
</html>



异常处理

请求超时 & 网络异常处理

  1. 通过 express 部署服务端
// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.get('/delay', (request, response) => {
    // 设置响应头，解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    setTimeout(() => {
        response.send('delay');
    }, 3000); // 3s 后才响应
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');

这里故意故意延时返回响应


  1. 在客户端上发送请求：

通过绑定 timeout、error 事件来处理请求超时、网络异常的问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ajax GET 请求</title>
        <style>
            #result {
                width: 200px;
                height: 100px;
                background: lemonchiffon;
            }
        </style>
    </head>

    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
        <script>
            let btn = document.getElementsByTagName('button')[0];
            let result = document.getElementById('result');
            btn.addEventListener('click', () => {
                // 1. 创建 Ajax 对象
                let xhr = new XMLHttpRequest();

                // 设置超时时间为 2s
                xhr.timeout = 2000;
                // 超时回调
                xhr.addEventListener('timeout', () =>
                    alert('网络异常，请稍后重试')
                );
                // 网络异常回调
                xhr.addEventListener('error', () =>
                    alert('你的网络似乎出了点问题！')
                );

                // 2. 初始化 HTTP 请求
                xhr.open('GET', 'http://127.0.0.1:8000/delay');

                // 3. 发送 HTTP 请求
                xhr.send();

                // 4. 监听 readystatechange 事件, 获取服务端返回的数据
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        result.innerHTML = xhr.response;
                    }
                });
            });
        </script>
    </body>
</html>

取消请求

xhr.abort()：用于取消 Ajax 请求

// 1. 引入 express 模块
const express = require('express');

// 2. 创建应用对象
let app = express();

// 3. 创建路由规则
app.get('/abort', (request, response) => {
    // 设置响应头，解决跨域问题
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    setTimeout(() => {
        response.send('abort');
    }, 3000); // 3s 后才响应
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000 端口监听中...');

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <button>点击发送</button>
        <button>点击取消</button>
        <script>
            const btn = document.querySelectorAll('button');
            let xhr = null;

            btn[0].addEventListener('click', () => {
                xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://127.0.0.1:8000/abort');
                xhr.send(); // 发送请求
            });

            btn[1].addEventListener('click', () => {
                xhr.abort(); // 取消请求
            });
        </script>
    </body>
</html>

请求重复发送问题

  • 思路：每新建一个请求，就会取消上一个请求，始终只有最后一个请求再执行
  • 方法：可通过设置标识变量来处理该问题
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <button>点击发送</button>
        <script>
            const btn = document.querySelector('button');
            let xhr = null;

            // 标识变量
            let isSending = false;

            btn.addEventListener('click', () => {
                // 判断标识变量, 节流
                if (isSending) xhr.abort();

                xhr = new XMLHttpRequest();

                // 修改标识变量
                isSending = true;

                xhr.open('GET', 'http://127.0.0.1:8000/abort');
                xhr.send();

                // 恢复标识变量
                xhr.addEventListener('readystatechange', () => {
                    if (xhr.readyState === 4) {
                        isSending = false;
                    }
                });
            });
        </script>
    </body>
</html>

JS.Huang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生Ajax
m0_56133013的博客
10-05 121
Ajax 全名：Async Javascript And XML 作用： 在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染 如何创建一个原生的ajax？ //第一步:创建一个XMLHttpRequest的实例 为xhr let xhr = new XMLHttpRequest(); //实例里面有一个readyState 他代表请求的状态 //readyState: 0 请求未初始化 刚刚实例化xmlHttpRequest //readyState: 1 客户端与服务器建立链接 调
原生ajax
weixin_44734398的博客
11-23 2913
1 Ajax简介 Ajax，全称“Asynchronous JavaScript and XML”，即异步的 JavaScript 和 XML。 通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 2 XML简介 XML是可扩展标记语言，XML与HTML类似区别： XML被设计用来传输和存储数据 HTML用来显示数据 XML中的标签都是自定义的 HTML中都是预定义标签 XML现在已经被JSON取代了。 ...
原生ajax使用
11-29
本代码是原生ajax使用demo，详情请查看博客 原生Ajax使用笔记
原生Ajax的用法
weixin_42671045的博客
05-07 535
这里主要分析XMLHttpRequest对象，下面是它的一段基础使用： var xhr = new XMLHttpRequest(); xhr.open('post','www.xxx.com',true) // 接收返回值 xhr.onreadystatechange = function(){ if(x...
原生ajax使用方法
HongRi_的博客
04-03 280
Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 同步与异步的区别 同步与异步的区同步发送一个请求，需要等待返回相应，如果没有返回相应，就不能发送下一个请求，客户端会一直处于等待返回相应的阶段。 异步发送一个请求，不等待返回相应，随时可以发送另一个请求。 原生的ajax 前...
HTTP协议之状态吗
hackinganglevip的专栏
08-27 314
HTTP/1.1中定义了5类状态码， 状态码由三位数字组成，第一个数字定义了响应的类别 1XX  提示信息 - 表示请求已被成功接收，继续处理 2XX  成功 - 表示请求已被成功接收，理解，接受 3XX  重定向 - 要完成请求必须进行更进一步的处理 4XX  客户端错误 -  请求有语法错误或请求无法实现 5XX  服务器端错误 -   服务器未能实现合法的请求
原生Ajax的使用
最新发布
2402_84417148的博客
04-16 352
Ajax（Asynchronous JavaScript and XML，异步的 JavaScriopt 和 XML）是一种用于创建动态 Web 应用程序的技术，它使用 JavaScript 和 XML（或 JSON）等技术来实现异步数据传输和动态更新页面内容。​ 通过 Ajax 技术，可以在不刷新整个页面的情况下，向服务器发送请求，获取数据并进行处理，从而实现更加流畅、响应更快的 Web 应用程序。404是请求成功了，请求发不出去就是失败，失败就会触发。如果时间到了，数据还没有回来，会自动取消请求。
ajax原生方法实现导出excel
12-23
后端（如 springboot）直接返回excel的输出流到前端，前端使用 该方法(js原生ajax)进行接收并实现页面的下载
Ajax原生
m0_62073591的博客
08-15 1288
同步的理解: 同步就是指一个进程在执行某个谓求的时候。若该请求需要一段时间才能返回信贽。那么这个进程将会一直等待下去,直到收到返仓信息才继绫执行下去;同步就相当于是当客户端发送请求给服务岩。在等待服务端喇应的请求时，客户岩不做其他的事情。当服务端做完了才返回到客户缓。这样的话客户端需要一直等待。用户使用起来会有不友好。异步是指进程不需要一直等下去，而是继续执行下面的操怍，不管其他进程的状态。当有海息返回时系统会通知进程进行处理,这样可以提高执行的效率。异步就相当于当客户端发送给服务剃请求时。...
基于原生ajax与封装的ajax使用方法(详解)
10-19
**原生Ajax使用方法** 原生Ajax的实现主要依赖于`XMLHttpRequest`对象。以下是一个基本的原生Ajax调用示例： ```javascript window.onload = function() { function clickbtn() { var request; if (window....
Ajax简单的异步交互及Ajax原生编写
12-12
一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收...
原生ajax的使用
Java_Fly1的博客
05-03 659
onreadystatechange:绑订事件处理函数（用来处理 readystatechange事件）
原生Ajax的使用。
z12845464的博客
12-30 558
大家好，我是尤雨海。。。。。
原生Ajax使用
joker的博客
10-05 107
//原生ajaxAsyncJavascriptAndXML //在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染 //http事务一个请求加上一个相关的响应就是一个完整的http事务 //如何创建一个原生的ajax //ajax核心对象XMLHttpRequest //1.创建一个XMLHttpRequest的实例为xhr letxhr=newXMLHttpRequest(); /...
原生Ajax的使用，四种请求方法示例（前后端代码）
kkkys_kkk的博客
01-13 3968
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
原生Ajax用法——一个简单的实例
weixin_30443895的博客
04-09 85
Ajax全名(Asynchronous(异步) JavaScript and XML)是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一个吩咐 让秘书去叫小李，秘书就去叫小李了，而领导接着做自己的事），而不是什么也不做就等着秘书告诉老板小李来了 具体的异步概念是这样的: 就是后台与界面可以进行数据交互...
JS原生Ajax的使用
等，你的到来。
11-28 441
1.XHR对象，原生版的Ajax xhr（俗称小黄人，O(∩_∩)O~），全名XMLHttpRequest ajax的onload方法是数据接收完毕后执行的函数。 2.FormData，模拟表单对象，通常与原生版Ajax搭配使用，网后台传数据 formData的append()方法，有两个参数，第一个是传给后台的参数名；第二个是对应的值。 XHR和FormData两者的结合使用，请看下图详
PHP原生Ajax请求详解及实例
本文主要探讨了在PHP环境下如何使用原生AJAX进行异步数据请求。AJAX（异步JavaScript和XML）技术允许我们在不刷新整个页面的情况下与服务器进行交互，提高了用户体验。以下是对PHP下原生AJAX请求的详细解释。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JS.Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值