前端-AJAX

之前在文章里写过一点,这里就接着写喽

jQuery怎样获得内容和属性?-CSDN博客

一、Axios 库

1.引入axios.js: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
2.使用 axios 函数
1)传入配置对象
2)再用 .then 回调函数接收结果,并做后续处理

axios({
url:'目标资源地址'
}).then((result)=>{
/对服务器返回的数据做后续处理
})

二、认识Url

URL(统一资源定位器)通常由以下几个部分组成:

  1. 协议(Protocol):URL的第一部分指定要用来访问资源的协议,例如 HTTP、HTTPS、FTP、SMTP等。例如,在 "https://www.example.com" 中,"https://" 就是指定了使用 HTTPS 协议。

  2. 域名(Domain Name):域名指定了要访问的主机或服务器的名称。在 "https://www.example.com" 中,"www.example.com" 就是域名部分。

  3. 端口号(Port):端口号是可选的,用于指定连接到服务器时使用的端口。如果未指定端口号,则使用默认端口。例如,常见的 HTTP 端口是 80,HTTPS 是 443。

  4. 路径(Path):路径指定服务器上资源的位置。例如,在 "https://www.example.com/page.html" 中,"/page.html" 就是路径。

  5. 查询参数(Query Parameters):查询参数是可选的,用于向服务器传递额外的参数。查询参数以问号 "?" 开头,多个参数之间使用 "&" 分隔。例如,在 "https://www.example.com/search?q=url" 中,"?q=url" 就是查询参数。

  6. 片段标识(Fragment Identifier):片段标识也是可选的,用于指定页面内的特定部分。片段标识以井号 "#" 开头。例如,在 "https://www.example.com/page.html#section1" 中,"#section1" 就是片段标识。

1)axios-查询参数

在使用 Axios 发起 HTTP 请求时,可以使用 params 选项来添加查询参数到 URL 中。这样可以方便地向服务器传递额外的信息。

以下是使用 Axios 的 params 选项的基本示例:

axios.get('https://www.example.com/api/data', {params: {key1: 'value1',key2: 'value2'}
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

在上面的示例中,我们向 'https://www.example.com/api/data' 发起了一个 GET 请求,并通过 params 选项传递了两个查询参数:key1key2。Axios 会自动将这些参数添加到 URL 中,生成类似 'https://www.example.com/api/data?key1=value1&key2=value2' 的请求地址。

三、常用的请求方法和数据提交

在网络请求中,常用的请求方法(HTTP Methods)包括:

  1. GET:用于从服务器获取资源,通常用于获取数据。GET 请求通过 URL 发送参数,对应于浏览器中的页面链接或者地址栏输入。

  2. POST:用于向服务器提交数据,通常用于创建新资源或者提交表单数据。POST 请求通过请求体发送数据,对应于表单的提交操作。

  3. PUT:用于向服务器更新资源,通常用于修改已存在的资源(全部)。PUT 请求通过请求体发送数据,对应于更新数据库记录等操作。

  4. DELETE:用于从服务器删除资源,通常用于删除指定的资源。DELETE 请求通过 URL 或请求体发送数据,对应于删除数据库记录等操作。

  5. PATCH:用于部分更新服务器上的资源,通常用于更新资源的部分属性。PATCH 请求通过请求体发送数据,对应于更新数据库记录的部分字段。

除了请求方法,数据的提交方式也有几种常见的方式:

  1. URL 参数:通过将参数附加在 URL 的查询字符串中来传递数据。这种方式通常在 GET 请求中使用,例如 https://www.example.com/search?q=keyword

  2. 请求体:通过在请求的消息主体中发送数据,通常在 POST、PUT、DELETE 和 PATCH 请求中使用。数据可以以多种格式进行编码,包括 JSON、表单数据、XML 等。

常见的数据提交格式包括:

  • JSON:将数据编码为 JSON 格式,在请求体中以字符串的形式传递。这种格式适合传递结构化数据,常见于 API 的请求和响应。

  • 表单数据:将数据编码为 URL 编码格式(application/x-www-form-urlencoded)或者多部分表单数据格式(multipart/form-data),在请求体中传递。这种格式适合模拟 HTML 表单的提交操作。

  • XML:将数据编码为 XML 格式,在请求体中以字符串的形式传递。这种格式适合与特定的 XML Web 服务进行交互。

根据具体的需求和后端接口的要求,选择合适的请求方法和数据提交方式。一般来说,GET 请求用于获取数据,POST 请求用于提交数据,PUT 和 DELETE 请求用于更新和删除数据,PATCH 请求用于部分更新数据。数据提交方式则根据后端接口的要求进行选择。

1)axios请求配置

在使用 Axios 发起 HTTP 请求时,可以配置多种参数来满足不同的需求。以下是一些常用的 Axios 请求配置选项:

  1. url:要请求的地址。

  2. method:请求的方法,例如 GET、POST、PUT、DELETE 等(默认值是get,所以获取数据时可以省略,但是提交数据时不可以省略)。

  3. params:作为查询字符串附加到 URL 的参数对象,用于 GET 请求。

  4. data:作为请求体发送的数据,用于 POST、PUT 和 PATCH 请求。

  5. headers:要添加到请求中的自定义 headers。

  6. timeout:请求超时时间,单位是毫秒。

  7. responseType:响应的数据类型,例如 'json'、'text' 等。

  8. withCredentials:指示跨域请求时是否携带用户凭据,如 Cookie、HTTP 认证信息等。

  9. onUploadProgress:上传进度回调函数,在文件上传时使用。

  10. onDownloadProgress:下载进度回调函数,在接收响应数据时使用。

  11. validateStatus:用于确定是否解析或拒绝给定的 Promise。

这些配置选项可以通过传递一个包含这些属性的 JavaScript 对象来配置 Axios 请求。例如:

axios({url: 'https://www.example.com/api/data',method: 'post',data: {name: 'John Doe',age: 30},headers: {'Content-Type': 'application/json'},timeout: 5000
})
.then(response => {console.log(response.data);
})
.catch(error => {console.error(error);
});

上述代码展示了一个 Axios 请求的基本配置,包括请求的地址、方法、数据、headers 和超时时间。根据实际需求,可以灵活地配置其他选项来满足不同的请求需求。

四、axios错误处理

在使用 Axios 发起 HTTP 请求时,通常需要处理可能出现的错误情况。因为错误信息存在在控制台,用户一般不会查看,所以要拿到错误信息并使用弹框反馈给用户。错误信息包含:浏览器没有返回信息产生的错误和axios产生的错误信息。以下是一些关于 Axios 错误处理的常用方法:

1、捕获异常:可以使用 .catch() 方法来捕获请求过程中发生的任何错误,包括网络错误、超时错误、服务器错误等。

axios.get('https://www.example.com/api/data').then(response => {// 请求成功时的处理逻辑}).catch(error => {// 捕获和处理错误console.error('An error occurred:', error);});

2、获取错误信息:在捕获到错误后,可以通过访问 error.response 属性来获取有关错误响应的详细信息,包括状态码、响应数据等。

axios.get('https://www.example.com/api/data').then(response => {// 请求成功时的处理逻辑}).catch(error => {if (error.response) {// 服务器返回了错误响应console.error('Server Error:', error.response.status);} else if (error.request) {// 请求发出但没有收到响应console.error('No response received:', error.request);} else {// 发生了错误console.error('Error:', error.message);}});

3、全局错误处理:可以设置 Axios 的全局错误处理器,在所有请求中统一处理错误。

axios.interceptors.response.use(response => {return response;
}, error => {// 全局错误处理逻辑console.error('Global Error Handler:', error);return Promise.reject(error);
});

五、HTTP协议和请求报文

HTTP(Hypertext Transfer Protocol,超文本传输协议)是用于传输超文本文档(例如 HTML)的应用层协议。它是 Web 上数据传输的基础,通常用于从 Web 服务器向浏览器传输网页,并允许用户在浏览器中请求和接收 Web 页面。

HTTP 协议的基本工作原理如下:

  1. 客户端发送请求:客户端(例如浏览器)向服务器发送 HTTP 请求,请求可以包括请求的资源地址、请求方法(GET、POST 等)、请求头部(Headers)和请求体(Body)等信息。

  2. 服务器处理请求:服务器接收到客户端的请求后,根据请求的内容进行处理,可能涉及到查找资源、执行特定的操作等。

  3. 服务器发送响应:服务器将处理结果封装成 HTTP 响应,包括响应状态码、响应头部和响应体等信息,然后发送给客户端。

  4. 客户端处理响应:客户端接收到服务器的响应后,根据响应的内容进行处理,可能涉及到解析 HTML 内容、执行 JavaScript 代码等。

HTTP 请求报文通常由两部分组成:请求行(Request Line)、请求头部(Headers)和请求体(Body)。具体结构如下:

1、请求行:包括请求方法(GET、POST 等)、请求的 URL 地址和使用的 HTTP 版本。

2、请求头部:包括多个键值对,用来描述请求的各种属性和要求,例如 Host、User-Agent、Content-Type 等。

  1. Host:指定请求的主机名。
  2. User-Agent:标识了发起请求的客户端信息。
  3. Accept:指定客户端能够接受的响应内容类型。
  4. Content-Type:指定请求体的数据类型。
  5. Content-Length:指定请求体的长度。

3、请求体(Body):请求体通常用于向服务器传递数据,比如在 POST 请求中传递表单数据或者 JSON 数据。请求体并不是所有请求都会包含,比如 GET 请求通常不包含请求体。

六、请求报文——错误排查

当处理 HTTP 请求报文时,有时候会遇到一些错误,需要进行排查和解决。以下是一些常见的 HTTP 请求报文错误和对应的排查方法:

  1. 请求方法错误:如果使用了不正确的请求方法(比如将 GET 用于提交表单数据),服务器可能会返回 405 Method Not Allowed 错误。请确保选择正确的请求方法来访问资源。

  2. URI 格式错误:如果请求行中的 URI 格式不正确,服务器可能会返回 400 Bad Request 错误。检查 URI 是否符合规范,并确保路径正确。

  3. 缺少必要的请求头:有些情况下,服务器要求包含特定的请求头信息,如果缺少这些信息,可能会导致请求失败。请检查请求头部是否完整并包含了必要的信息。

  4. 请求体格式错误:如果请求需要包含请求体而未提供,或者请求体格式错误,服务器可能返回 400 Bad Request 错误。确保请求体内容格式正确且完整。

  5. 请求超时:如果请求处理时间过长,可能会导致超时错误。可以尝试优化请求处理逻辑,减少响应时间。

  6. 网络连接问题:有时候请求失败是由于网络连接问题引起的。检查网络连接是否正常,尝试重新发送请求。

  7. 服务器端错误:如果以上排查方法无效,并且出现了 5xx 级别的错误码,可能是服务器端出现了问题。联系服务器管理员以获取更多信息。

七、HTTP协议——响应报文

HTTP 响应报文是服务器端向客户端返回数据的格式化结构,通常由三部分组成:状态行(Status Line)、响应头部(Headers)和响应体(Body)。

1、状态行(Status Line):状态行包含了响应的 HTTP 协议版本、状态码(Status Code)和状态消息(Status Message),格式如下:

HTTP/1.1 200 OK

2、响应头部(Headers):响应头部包含了关于响应的元信息,格式为键值对,每个键值对占据一行,常见的响应头包括:

  • Content-Type:指定响应体的数据类型及字符集。
  • Content-Length:指定响应体的长度。
  • Server:表示服务器软件信息。
  • Date:表示响应生成的日期时间。
Content-Type: text/html; charset=UTF-8
Content-Length: 1024
Server: Apache/2.4.41 (Unix)
Date: Mon, 28 Feb 2024 07:30:00 GMT

3、响应体(Body):响应体包含了服务器返回给客户端的实际数据,比如 HTML 内容、JSON 数据等。响应体的内容取决于服务器端的处理结果和请求的类型。

1)常见的状态码及其含义

HTTP 协议定义了一系列状态码(Status Code),用于表示服务器对请求的处理结果。状态码主要分为五大类,每类又包含若干具体的状态码,以下是常见的状态码及其含义:

  1. 信息性状态码(Informational Status Codes)(100-199):指示请求已被接受,继续处理。

    • 100 Continue:服务器已经收到请求的初始部分,客户端应该继续请求。
    • 101 Switching Protocols:服务器将遵从客户的请求转换到另外一种协议。
  2. 成功状态码(Success Status Codes)(200-299):表示请求被成功处理。

    • 200 OK:请求成功。一般用于 GET、POST 请求。
    • 201 Created:请求已经被实现,并且创建了一个新的资源。
    • 204 No Content:服务器成功处理了请求,但不需要返回任何内容。
  3. 重定向状态码(Redirection Status Codes)(300-399):表示需要进行进一步操作以完成请求。

    • 301 Moved Permanently:请求的资源已被永久移动到新位置。
    • 302 Found:请求的资源临时从不同的 URI 响应请求。
    • 304 Not Modified:客户端发送条件请求时,服务器端允许访问但未改变内容。
  4. 客户端错误状态码(Client Error Status Codes)(400-499):表示客户端提交的请求有错误。

    • 400 Bad Request:请求无效,例如请求中包含无效的参数。
    • 403 Forbidden:服务器拒绝请求。
    • 404 Not Found:请求的资源未找到。
  5. 服务器错误状态码(Server Error Status Codes)(500-599):表示服务器在处理请求时发生错误。

    • 500 Internal Server Error:服务器遇到了一个未曾预料的状况,导致无法完成请求。
    • 502 Bad Gateway:充当网关或代理的服务器,从远端服务器接收到了一个无效的响应。
    • 503 Service Unavailable:服务器暂时过载或维护,无法处理请求。

通过状态码,可以快速了解服务器对请求的处理结果,便于进行错误排查和调试。

八、form-serialize插件

1、form-serialize 是一个 JavaScript 库,用于将表单数据序列化为对象或 URL 编码的字符串。通过 form-serialize,可以轻松地获取表单中的数据并以所需的格式进行处理。

2、引入 form-serialize:在需要使用的页面中引入 form-serialize 库:

​
<script src="path/to/form-serialize/dist/form-serialize.min.js"></script>​

 示例:

<form id="myForm"><input type="text" name="username" value="john_doe"><input type="email" name="email" value="john.doe@example.com">
</form><script>var form = document.getElementById('myForm');var formData = serialize(form, { hash: true });console.log(formData);
</script>
  • 上述示例中,我们首先获取了 ID 为 myForm 的表单元素,并使用 form-serialize 库的 serialize 函数将表单数据序列化为对象,并设置 hash: true 表示返回哈希对象(hash: false表示返回查询字符串)。
  • 最后,我们将序列化后的表单数据打印输出到控制台。

empty: true 这个参数通常用于表单序列化插件或库中,表示在序列化表单数据时,是否包括那些值为空(empty)的表单字段。

当设置 empty: true 时,序列化过程将包括所有表单字段,包括那些值为空的字段。这意味着即使表单字段的值为空,也会被序列化并包含在最终的表单数据中。

举个例子,假设有一个表单包含两个输入框,其中一个输入框的值为空。如果使用 empty: true 对该表单进行序列化,那么空值的输入框也会被包括在序列化后的数据中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/708146.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《最新出炉》系列初窥篇-Python+Playwright自动化测试-33-处理https 安全问题或者非信任站点-上篇

1.简介 这一篇宏哥主要介绍playwright如何在IE、Chrome和Firefox三个浏览器上处理不信任证书的情况&#xff0c;我们知道&#xff0c;有些网站打开是弹窗&#xff0c;SSL证书不可信任&#xff0c;但是你可以点击高级选项&#xff0c;继续打开不安全的链接。举例来说&#xff0c…

多模态论文阅读--V*指导视觉搜索成为多模态大语言模型的核心机制

V*&#xff1a;Guided Visual Search as a Core Mechanism in Multimodal LLMs 摘要IntroductionRelated WorkComputational Models for Visual Search多模态模型 MethodVQA LLM with Visual Working MemoryModel StructureData Curation for VQA LLM V*&#xff1a;LLM-guided…

计算机网络-网络互连和互联网(四)

1.TCP协议&#xff1a; 传输控制协议&#xff0c;面向字节流按顺序连接&#xff0c;可靠&#xff0c;全双工&#xff0c;可变滑动窗口&#xff0c;缓冲累积传送。协议号为6。下面是TCP段&#xff08;段头&#xff09;&#xff0c;TCP头&#xff08;传输头&#xff09;&#xf…

【重要公告】BSV区块链协会全新推出“网络访问规则NAR”

​​发表时间&#xff1a;2024年2月15日 BSV区块链协会正式宣布已为BSV区块链推出一套全新的网络访问规则&#xff08;Network Access Rules&#xff0c;以下简称“NAR”&#xff09;。 NAR是一整套规则&#xff0c;用于规范BSV协会与BSV网络节点之间的关系。它基于比特币最初…

【LeetCode】每日一题:使二叉树所有路径值相等的最小代价

该题采用自底向上的思路的话&#xff0c;很容易想到使用贪心的思想&#xff0c;但是如何进行具体操作却有些难度。 这里补充一个重要的结论&#xff1a;二叉树的数组形式中&#xff0c;第i个节点的父节点是i/2&#xff1b;接下来只需要让自底向上让每个路径上的代价保持最低限…

为什么会造成服务器丢包?

随着云服务器市场的发展和网络安全问题&#xff0c;服务器丢包问题成为了一个普遍存在的现象。服务器丢包是指在网络传输过程中&#xff0c;数据包由于各种原因未能到达目标服务器&#xff0c;导致数据传输中断或延迟。那么&#xff0c;为什么会造成服务器丢包呢&#xff1f;下…

2024年2月深度学习的论文推荐

我们这篇文章将推荐2月份发布的10篇深度学习的论文 Beyond A*: Better Planning with Transformers via Search Dynamics Bootstrapping. https://arxiv.org/abs/2402.14083 Searchformer是一个基于Transformer架构的人工智能模型&#xff0c;经过训练可以模拟A星寻路算法&a…

【Java编程进阶之路 06】深入探索:JDK、JRE与JVM的关系与差异

JDK、JRE与JVM&#xff1a;揭开Java运行环境的神秘面纱 在Java开发者的日常工作中&#xff0c;JDK、JRE和JVM这三个概念是不可或缺的。它们构成了Java应用程序的运行环境&#xff0c;但很多初学者可能对这三者的关系和差异感到困惑。本文旨在详细解析JDK、JRE和JVM之间的关系&…

代码随想录算法刷题训练营day27:LeetCode(39)组合总和、LeetCode(40)组合总和 II、LeetCode(131)分割回文串

代码随想录算法刷题训练营day27&#xff1a;LeetCode(39)组合总和、LeetCode(40)组合总和 II、LeetCode(131)分割回文串 LeetCode(39)组合总和 题目 代码 import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; import java.util.List;clas…

【论文笔记】Attention Is All You Need

【论文笔记】Attention Is All You Need 文章目录 【论文笔记】Attention Is All You NeedAbstract1 Introduction2 Background补充知识&#xff1a;软注意力 soft attention 和硬注意力 hard attention&#xff1f;补充知识&#xff1a;加法注意力机制和点乘注意力机制Extende…

计算机硬件 7.3测试优化升级

第三节 测试 优化 升级 一、测试 1.测试方法&#xff1a;考机法、仪器测试法、软件测试法。 2.测试软件&#xff1a;CPU—Z、GPU—Z、PCMark、Hwinfo、Super PI。 二、优化 1.分类&#xff1a;硬盘优化、操作系统优化。 2.硬盘优化 目的&#xff1a;提高读写速度、增大可用…

11.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-接管游戏接收网络数据包的操作

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;接管游戏发送数据的操作 码云地址&#xff08;master 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/titan 码云版本号&#xff1a;8256eb53e8c16281bc1a29cb8d26d352bb5bbf4c 代…

在Windows中安装PyTorch

文章目录 1. 创建虚拟环境2. 检查显卡版本和CUDA3. 下载链接4. 下载5. 等待6. 检测 1. 创建虚拟环境 具体查看我之前写的 《在Windows中利用Python的venv和virtualenv创建虚拟环境》 2. 检查显卡版本和CUDA 这种情况是需要电脑上有单独的英伟达的显卡、或者英伟达的显卡和集显…

NoSQL数据库介绍

目录 一、发展历史 二、什么是NoSQL&#xff1f; 三、为什么使用NoSQL&#xff1f; 四、NoSQL vs. RDBMS 五、NoSQL的四种类型 键值存储 文档存储 列式存储 图形存储 六、NoSQL的优缺点 七、NoSQL的特点 灵活的可扩展性 灵活的数据模型 与云计算紧密融合 大数据量…

【Java程序设计】【C00324】基于Springboot的高校疫情防控管理系统(有论文)

基于Springboot的高校疫情防控管理系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的高校疫情防控系统&#xff0c;本系统有管理员、学校管理员、学院管理员、教师以及学生五种角色&#xff1b; 管理员&#x…

2732: 【C2】【排序】钻石收集者

题目描述 总是喜欢亮闪闪的东西的奶牛Bessie空闲时有挖掘钻石的爱好。她收集了N颗不同大小的钻石并且她希望将其中一些钻石放在谷仓展览室的一个盒子里。由于Bessie希望盒子里面的钻石在大小上相对接近&#xff0c;&#xff0c;她不会将大小相差大于K的钻石放在盒子里。 现在…

MySQL 的数据库操作,利用Spring Boot实现MySQL数据库的自动创建

执行 show databases; 命令可以查看当前数据库的所有数据库。 注意在 MySQL 客户端执行 SQL 语句的时候要带上分号 ; 并按下 enter 键&#xff0c;不然 MySQL 会认为你还没有输入完&#xff0c;会换一行继续等待你输入。 OK&#xff0c;像上面截图中的 information_schema、mys…

3D Gaussian splatting 协方差矩阵 球谐函数 简单理解

3D Gaussian splatting 是一种图形和视觉处理技术&#xff0c;常用于体积渲染、点云渲染和其他应用中&#xff0c;以便对数据进行平滑或重建。在这个上下文中&#xff0c;高斯分布&#xff08;或高斯“splat”&#xff09;用于表示单个数据点&#xff08;如一个点云中的点&…

leetcode 2.28

Leetcode hot100 动态规划1.最大子数组和2.不同路径3.最小路径和4. 爬楼梯5. 杨辉三角6.打家劫舍 动态规划 1.最大子数组和 最大子数组和 动态规划&#xff1a; 按照四个步骤求解&#xff1a; 1&#xff09;确定状态&#xff1a;以n代表第n个元素为末尾的最大子序列和 最后一…

InnoDB高级特性篇(2)-InnoDB的日志系统详解

InnoDB是MySQL数据库中最常用的存储引擎之一&#xff0c;其强大之处在于其完善的日志系统。本文将详细介绍InnoDB的日志系统。 在数据库中&#xff0c;日志是一种记录数据库操作的机制&#xff0c;它可以帮助恢复数据、保证数据一致性以及提高系统性能。InnoDB的日志系统由多个…