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

ajax-axios-url-form-serialize 插件

news 2025/12/16 8:41:54

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/12/16 5:34:26

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/12/15 23:23:36

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/11/11 23:02:06

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/11/25 4:57:19

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/11/25 22:42:21

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/12/14 18:18:37

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/12/14 4:42:07

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/12/11 8:44:36