当前位置： 首页 > news >正文

ajax-axios-url-form-serialize 插件

news 文章来源：https://blog.csdn.net/qq_51523316/article/details/132383242 2024/11/25 22:57:29

AJAX

AJAX 概念

1.什么是 AJAX ? mdn

  • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

  • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

2.什么是服务器？

  • 可以暂时理解为提供数据的一台电脑

axios

使用

起步 | Axios Docs (axios-http.com)

1.引入 axios.js 文件到自己的网页中

axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js

2.使用

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

注意：请求的 url 地址, 就是标记资源的网址

注意：then 方法，获取成功时，服务器返回的数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/province',}).then(result => {console.log(this);//windowconsole.log(result);console.log(result.data);console.log(result.data.list);console.log(result.data.list.join('<br>'));document.body.innerHTML = result.data.list.join('<br>');})</script>
</body></html>

拓展-URL

1.什么是 URL ？

  • 统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）

2.URL 的组成?

  • 协议，域名，资源路径（URL 组成有很多部分，先掌握这3个重要的部分即可）
  • https://api.oioweb.cn/api/common/history
  • 协议：https
  • 域名：api.oioweb.cn
  • 资源路径：api/common/history
  • 协议://域名/资源路径

3.什么是 http 协议 ?

  • 叫超文本传输协议，规定了浏览器和服务器传递数据的格式（而格式具体有哪些稍后我们就会学到）

4.什么是域名 ?

  • 标记服务器在互联网当中的方位，网络中有很多服务器，你想访问哪一台，就需要知道它的域名才可以

5.什么是资源路径 ?

  • 一个服务器内有多个资源，用于标识你要访问的资源具体的位置
axios({url: 'https://api.oioweb.cn/api/common/history'
}).then(result => {console.log(result)
})

携带参数

query参数

  • 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
  • 参数名一般是后端规定的，值前端传递。

axios 携带query查询参数

  • 使用 params

    axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {})

path参数

比如：https://api.oioweb.cn/api/weather/GetWeather

axios 携带path参数

let str = 'GetWeather'
axios({url: `https://api.oioweb.cn/api/weather/${str}`,
}).then(result => {})

body参数

axios 携带body参数

axios({url: '目标资源地址',method:'post'data:body参数
}).then(result => {})

method请求方法

请求方法操作
GET获取数据
POST数据提交
PUT修改数据（全部）
DELETE删除数据
PATCH修改数据（部分）

注意：axios内部设置了默认请求方法就是GET

axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {})

axios 的核心配置项

url：目标资源地址，method：请求方法，params：查询参数，data：提交的数据

catch

axios({// ...请求选项
}).then(result => {// 处理成功数据
}).catch(error => {// 处理失败错误
})

HTTP 协议

请求报文

请求报文：是浏览器按照协议规定发送给服务器的内容，例如刚刚注册用户时，发起的请求报文：

  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息，比如：Content-Type（指定了本次传递的内容类型）
  • 空行：分割请求头，空行之后的是发送给服务器的资源
  • 请求体：发送的资源

在这里插入图片描述

在这里插入图片描述

响应报文

响应报文：是服务器按照协议固定的格式，返回给浏览器的内容

  • 响应行（状态行）：协议，HTTP响应状态码，状态信息

  • 响应头：以键值对的格式携带的附加信息，比如：Content-Type（告诉浏览器，本次返回的内容类型）

  • 空行：分割响应头，控制之后的是服务器返回的资源

  • 响应体：返回的资源

在这里插入图片描述

HTTP 响应状态码

  • 用来表明请求是否成功完成
  • 例如：404（客户端要找的资源，在服务器上不存在）
状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务端错误

form-serialize 插件

  1. 使用 form-serialize 插件提供的 serialize 函数就可以办到

  2. form-serialize 插件语法：

    1. 引入 form-serialize 插件到自己网页中

    2. 使用 serialize 函数

      • 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
      • 参数2：配置对象
        • hash：
          • true - 收集出来的是一个 JS 对象结构
          • false - 收集出来的是一个查询字符串格式
        • empty：
          • true - 收集空值
          • false - 不收集空值

form-serialize 插件在资源中下载

相关文章：

ajax-axios-url-form-serialize 插件

AJAX AJAX 概念 1.什么是 AJAX ? mdn 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中&#xff0c;使用 AJAX技术&#xff08;XHR对象&#xff09;发起获取省份列表数据的请求&#xff0c;服务器代码响应准备好的省份列表数据给前端&#xff0c;前端拿到数据数…...

编程日记 2023/8/23 5:02:45

【AIGC】单图换脸离线版软件包及使用方法

云端再好&#xff0c;都不如放自己手里啊&#xff0c;想怎么就怎么玩。云端再好&#xff0c;都不如放自己手里啊&#xff0c;想怎么就怎么玩。 Roop作为一个新出的开源项目&#xff0c;配置起来还是有一定难度的。 我已经把各种依赖&#xff0c;模型&#xff0c;环境配置已经…...

编程日记 2023/8/23 5:01:43

8.19论文阅读

文章目录 Graph-Segmenter: Graph Transformer with Boundary-aware Attention for Semantic Segmentation方法 SCSC: Spatial Cross-scale Convolution Module to Strengthen both CNNs and Transformers方法 Deformable Mixer Transformer with Gating for Multi-Task Learni…...

编程日记 2023/8/23 5:00:41

HAProxy

目录 HAProxy HAProxy介绍 主要特性 LVS、nginx、HAProxy区别 nginx LVS HAProxy 负载均衡策略 Haproxy搭建 Web 群集 Haproxy服务器 编译安装 Haproxy Haproxy服务器配置 添加haproxy 系统服务 节点服务器部署 日志定义 HAProxy HAProxy介绍 HAProxy是可提供高…...

编程日记 2023/8/23 4:59:35

基于EasyExcel的Excel读取

1.引入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.11</version> </dependency>2.读取器代码&#xff1a; package com.vz.utils.excel;import com.alibaba.excel.Eas…...

编程日记 2023/8/23 4:58:33

链路聚合详解

链路聚合详解 华为交换机链路聚合&#xff1a;Linux链路聚合bond配置 华为交换机链路聚合&#xff1a; 方式一&#xff1a;配置手工负载分担方式的链路聚合 [CORE1] interface Eth-Trunk 1 [CORE1-Eth-Trunk1] trunkport GigabitEthernet 0/0/5 to 0/0/6 [CORE1-Eth-Trunk1] p…...

编程日记 2023/8/23 4:57:32

Shell编程学习之if分支语句的应用

Shell编程中的if分支语句&#xff1a;伪代码表示&#xff1a;注意符号和表达式之间的空格&#xff1b; if [ 表达式1 ] then分支1 elif [ 表达式2 ] then分支2 elif [ 表达式3 ] then分支3 else其它 fi按整型的方式&#xff0c;if分支语句比较字符串的大小&#xff1a;等于&am…...

编程日记 2023/8/23 4:56:31

2023.8 - java - 泛型

泛型问题的引出&#xff1a; jdk 1.5 引出泛型 // package 泛型; public class index {public static void main (String[] args){test t new test();t.setContent("aaa");int a (int) t.getContent();System.out.println(a);} }class test{Object content;publi…...

编程日记 2023/8/23 4:55:28

【数据结构练习】链表面试题锦集一

目录 前言&#xff1a; 1. 删除链表中所有值为key的节点 方法一&#xff1a;正常删除&#xff0c;头结点另外讨论 方法二:虚拟头结点法 方法三&#xff1a;递归 2.反转链表 方法一&#xff1a;双指针迭代 方法二&#xff1a;递归法解析&#xff1a; 3.链表的中间结点 方法…...

编程日记 2023/8/23 4:54:25

自然语言处理从入门到应用——LangChain：链（Chains）-[通用功能：SequentialChain和TransformationChain]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 SequentialChain 在调用语言模型之后&#xff0c;下一步是对语言模型进行一系列的调用。若可以将一个调用的输出作为另一个调用的输入时则特别有用。在本节中&#xff0c;我们将介绍如何使用顺序链来实现这一点。顺序…...

编程日记 2023/8/23 4:53:24

什么是卷积神经网络

目录 什么是卷积神经网络 全链接相对笨重&#xff1a;大胖子​编辑 ​编辑 参数众多&#xff1a;容易造成过拟合 ​编辑 卷积核&#xff1a;进行图像特征提取&#xff0c;源于卷积原理&#xff1a;求相交面积 卷积的作用 卷积的意义 ​编辑 通过卷积核减少参数 深度卷积…...

编程日记 2023/8/23 4:52:22

银行数字化转型程度-根据年报词频计算（2012-2021年）

银行数字化转型程度是根据银行年报中的数字化相关词频计算所得的数据。这一数据包括数字化词频关键词、以及数字化转型程度&#xff0c;反映了银行数字化转型的程度和进展情况。从经济学研究的角度来看&#xff0c;这一数据具有重要的参考价值。 首先&#xff0c;银行数字化转…...

编程日记 2023/8/23 4:51:20

微信开发之一键修改群聊备注的技术实现

修改群备注 修改群名备注后&#xff0c;如看到群备注未更改&#xff0c;是手机缓存问题&#xff0c;可以连续点击进入其他群&#xff0c;在点击进入修改的群&#xff0c;再返回即可看到修改后的群备注名&#xff0c;群名称的备注仅自己可见 请求URL&#xff1a; http://域名地…...

编程日记 2023/8/23 4:50:19

[oneAPI] 基于BERT预训练模型的SQuAD问答任务

[oneAPI] 基于BERT预训练模型的SQuAD问答任务 Intel Optimization for PyTorch and Intel DevCloud for oneAPI基于BERT预训练模型的SQuAD问答任务语料介绍数据下载构建 模型 结果参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Int…...

编程日记 2023/8/23 4:49:17

机器学习笔记之优化算法(十七)梯度下降法在强凸函数的收敛性分析

机器学习笔记之优化算法——梯度下降法在强凸函数的收敛性分析 引言回顾&#xff1a;梯度下降法在强凸函数的收敛性二阶可微——梯度下降法在强凸函数的收敛性推论 引言 上一节介绍并证明了&#xff1a;梯度下降法在强凸函数上的收敛速度满足 Q \mathcal Q Q-线性收敛。 本节将…...

编程日记 2023/8/23 4:48:16

shell脚本中linux命令的特殊用法记录

shell脚本中linux命令的特殊用法记录 1、linux命令特殊参数选项1.1、sed -e1.2、echo -e 2、 shell 扩展2.1、[[ ]]支持用~进行正则匹配 3、特殊命令用法3.1、{} 变量替换 1、linux命令特殊参数选项 1.1、sed -e sed -e以严格模式执行脚本&#xff0c;在sed -e 后面的所有命令…...

编程日记 2023/8/23 4:47:14

Nvidia H100：今年55万张够用吗？

原文标题&#xff1a;Nvidia H100: Are 550,000 GPUs Enough for This Year? 作者&#xff1a;Doug Eadline August 17, 2023 The GPU Squeeze continues to place a premium on Nvidia H100 GPUs. In a recent Financial Times article, Nvidia reports that it expects to…...

编程日记 2023/8/23 4:46:12

【Vue2.0源码学习】生命周期篇-初始化阶段(initLifecycle)

文章目录 1. 前言2. initLifecycle函数分析3. 总结 1. 前言 在上篇文章中&#xff0c;我们介绍了生命周期初始化阶段的整体工作流程&#xff0c;以及在该阶段都做了哪些事情。我们知道了&#xff0c;在该阶段会调用一些初始化函数&#xff0c;对Vue实例的属性、数据等进行初始…...

编程日记 2023/8/23 4:45:11

Android开发基础知识总结（三）简单控件（上）

一.文本显示 考虑到结构样式相分离的思想&#xff0c;我们往往在XML中设置文本 <TextViewandroid:layout_width"342dp"android:layout_height"70dp"android:text"房价计算器"android:layout_gravity"center"android:textColor"…...

编程日记 2023/8/23 4:44:10

在Qt窗口中添加右键菜单

在Qt窗口中添加右键菜单 基于鼠标的事件实现流程demo 基于窗口的菜单策略实现Qt::DefaultContextMenuQt::ActionsContextMenuQt::CustomContextMenu信号API 基于鼠标的事件实现 流程 需要使用:事件处理器函数(回调函数) 在当前窗口类中重写鼠标操作相关的的事件处理器函数&a…...

编程日记 2023/8/23 4:43:08

Day8 智慧商城

项目演示 项目收获 创建项目 调整初始化目录 1.删components里的所有文件 2.删views里的所有文件 3.router/index.js 删路由 删规则 import Vue from vue import VueRouter from vue-routerVue.use(VueRouter)const router new VueRouter({routes: [] })export default route…...

编程日记 2023/8/23 4:42:05

LeetCode：Hot100python版本之回溯

回溯算法其实是纯暴力搜索。for循环嵌套是写不出的 组合&#xff1a;没有顺序 排列&#xff1a;有顺序 回溯法可以抽象为树形结构。只有在回溯算法中递归才会有返回值。 46. 全排列 排列是有顺序的。 组合类问题用startindex&#xff0c;排序类问题用used&#xff0c;来标…...

编程日记 2023/8/23 4:41:04

分布式事务理论基础

今天啊&#xff0c;本片博客我们一起来学习一下微服务中的一个重点和难点知识&#xff1a;分布式事务。 我们会基于Seata 这个框架来学习。 1、分布式事务问题 事务&#xff0c;我们应该比较了解&#xff0c;我们知道所有的事务&#xff0c;都必须要满足ACID的原则。也就是 …...

编程日记 2023/8/23 4:40:02

线性代数强化第三章

目录 一&#xff0c;关于A伴随&#xff0c;A逆与初等矩阵 二&#xff0c;分块矩阵 三&#xff0c;矩阵方程 ​ 一&#xff0c;关于A伴随&#xff0c;A逆与初等矩阵 如何证明行列式的值不能是0&#xff1b; 此秩为1. 法一&#xff1a; 法二&#xff1a; 不用看是列变换还是行变…...

编程日记 2023/8/23 4:38:59

搭建自己的私有 开源LoRaWAN 网络服务器（The ThingsStack）---之配置

介绍 这是使用 Docker 在您自己的硬件上安装 Things Stack Enterprise 或开源代码以运行您自己的私有 LoRaWAN 网络服务器的指南。 运行 The Things Stack 的方法有多种。 Things Stack 开源和企业发行版旨在在您自己的硬件上运行，本指南也对此进行了介绍。 对于具有高吞吐量的…...

编程日记 2023/8/23 4:37:56

多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测

多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SCNGO-CNN-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.SCNGO-CNN-Attention超前24步多变量回归预测算法。 程序平台&#xff1a;无Attention适…...

编程日记 2023/8/23 4:36:55

clickhouse的删除和更新

clickhouse不擅长更新和删除操作&#xff0c;更新操作很重&#xff0c;更新是重新创建一个分区&#xff0c;更新完后&#xff0c;太混之前的 ClickHouse提供了DELETE和UPDATE的能力&#xff0c;这类操作被称为Mutation查询&#xff0c;它可以看作ALTER语句的变种。虽然Mutation…...

编程日记 2023/8/23 4:35:54

微前端 - qiankun

qiankun 是一个基于 single-spa 的微前端实现库&#xff0c;旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 本文主要记录下如何接入 qiankun 微前端。主应用使用 vue2&#xff0c;子应用使用 vue3、react。 一、主应用 主应用不限技术栈&#xff0c;只需要提…...

编程日记 2023/8/23 4:34:50

前端编辑页面修改后和原始数据比较差异

在软件研发过程中&#xff0c;会遇到很多编辑页面&#xff0c;有时编辑页面和新增页面长的基本上一样&#xff0c;甚至就是一套页面供新增和编辑共用。编辑页面的场景比较多&#xff0c;例如&#xff1a; 场景一、字段比较多&#xff0c;但实际只修改了几个字段&#xff0c;如…...

编程日记 2023/8/23 4:33:46

docker第一次作业

docker第一次作业 1.安装docker服务&#xff0c;配置镜像加速器 yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sed -i sdownload.docker.commirrors.aliy…...

编程日记 2023/8/23 4:32:42

cookies因预料之外的输出被阻止 wordpress/推广竞价托管费用

Hadoop分布式的搭建 1. 搭建前提 多台计算机计算机需要安装Java网络防火墙关闭计算机之间可以连通 1.1 多台计算机的准备 如果要准备多台真的虚拟机&#xff0c;成本太高&#xff0c;我们在此使用虚拟机 但是安装多台虚拟机速度太慢&#xff0c;所以我们选择克隆 如何克隆?…...

编程日记 2024/11/25 21:03:48

wordpress读者墙不显示/全网营销系统是干什么的

12.1 Linux内置命令概述 ​ Linux里有一些特殊的命令&#xff0c;称为内置命令&#xff08;直接内置在BASH解释器中&#xff09;&#xff0c;它们天生就与其他的普通命令不同&#xff0c;因为它们从系统启动成功的那一刻就已经在内存里安家了。 ​ 当其他普通命令还在慢悠悠地…...

编程日记 2024/11/25 21:00:46

wordpress密码原理/免费网站在线客服系统源码

摄影&#xff1a;产品经理厨师&#xff1a;产品经理当我们要批量读取多个文件所有内容&#xff0c;并把所有行打印出来时&#xff0c;我们可能会这样写代码&#xff1a;file_list [1.txt, 2.txt, 3.txt]for path in file_list:with open(path, encodingutf-8) as f:for line i…...

编程日记 2024/11/25 20:00:51

软件开发外包公司赚钱不/上海小红书seo

我在我的项目中使用Spring Data JPA和Hibernate JPA提供程序.在我的服务中,我有一个方法,它将实体保存在数据库中,而不是使用返回的对象,我尝试获取有关此实体的更多详细信息.因此,不会获取详细信息.在日志中,我只看到insert语句,没有select的详细信息.这是我的代码&#xff1a…...

编程日记 2024/11/25 16:38:29

电商行业接单平台/网络优化工程师主要负责什么工作

2019独角兽企业重金招聘Python工程师标准>>> 当前日志系统常用的有elk&#xff08;elasticsearch logstash kibana&#xff09;&#xff0c;不过很多公司不喜欢用logstash&#xff0c;而会用很多其他性能好、资源利用少的日志采集软件&#xff0c;其中rsyslog会是很…...

编程日记 2024/11/25 12:34:54

长沙seo网站排名优化/网站安全查询系统

一、主要的设计模式二、spring&#xff08;AOP,MVC&#xff09;&#xff0c;mybatis,redis &#xff08;含查看spring部分源码&#xff09;三、sqlSession(事务问题、jdk动态代理)----XXXtemplate四、jms和soa的差别五、ngix负载原理七、分布式技术学习转载于:https://blog.51c…...

编程日记 2024/11/25 10:24:32