ajax-axios-url-form-serialize 插件

news2024/11/16 8:29:53

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);//window
            console.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 插件在资源中下载

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

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

相关文章

面试百问:Redis常见的故障以及发生场景

作为一个测试同学&#xff0c;被测系统架构中有使用到redis吗&#xff1f;对redis常见的故障有了解吗&#xff1f;又是如何进行测试的呢&#xff1f; 针对常见的redis面试问题&#xff0c;怎样才算一个高质量的回答呢&#xff0c;回答思路一般包括 问题的类型是什么&#xff…

Qt应用开发(基础篇)——高级纯文本窗口 QPlainTextEdit

一、前言 QPlainTextEdit类继承于QAbstractScrollArea&#xff0c;QAbstractScrollArea继承于QFrame&#xff0c;是Qt用来显示和编辑纯文本的窗口。 滚屏区域基类https://blog.csdn.net/u014491932/article/details/132245486?spm1001.2014.3001.5501框架类QFramehttps://blo…

使用IDM下载视频出现“由于法律原因,IDM无法下载...

一、问题描述 由于法律原因,IDM无法下载..,如图: 二、原因分析 下载该IDM抓取的M3U8文件,查看其中的内容发现 : #EXT-X-KEY 字段已经写明了加密方式是AES-128,包含一个URI和IV值 #EXTM3U #EXT-X-VERSION:3 #EXT-X-TARGETDURATION:8 #EXT-X-MEDIA-SEQUENCE:0 #EXT-X-KEY:…

【机器学习】处理不平衡的数据集

一、介绍 假设您在一家给定的公司工作&#xff0c;并要求您创建一个模型&#xff0c;该模型根据您可以使用的各种测量来预测产品是否有缺陷。您决定使用自己喜欢的分类器&#xff0c;根据数据对其进行训练&#xff0c;瞧&#xff1a;您将获得96.2%的准确率&#xff01; …

分析了下内网穿透技术,都在这了

内网穿透是一种将位于内网中的计算机或设备暴露给公网的技术&#xff0c;以便可以从外部网络访问这些设备。这在许多场景中非常有用&#xff0c;例如远程访问内网中的服务器、搭建本地 Web 服务器、共享文件等。 目前内网穿透一般都以下五种方案 目录 方案一&#xff1a;使用…

Cesium加载ArcGIS Server4490且orgin -400 400的切片服务

Cesium在使用加载Cesium.ArcGisMapServerImageryProvider加载切片服务时&#xff0c;默认只支持wgs84的4326坐标系&#xff0c;不支持CGCS2000的4490坐标系。 如果是ArcGIS发布的4490坐标系的切片服务&#xff0c;如果原点在orgin X: -180.0Y: 90.0的情况下&#xff0c;我们可…

若依的使用(token补充、HTTPS(网络安全)、分页前后端配置)

本文章转载于公众号&#xff1a;王清江唷,仅用于学习和讨论&#xff0c;如有侵权请联系 QQ交流群&#xff1a;298405437 本人QQ&#xff1a;4206359 具体视频地址:8 跑后端_哔哩哔哩_bilibili 1、HTTP&#xff1f; 曾经我们在讲JWT的时候&#xff0c;当时JWT需要配合https…

企业信息化过程----应用管理平台的构建过程

1.信息化的概念 信息化是一个过程&#xff0c;与工业化、现代化一样&#xff0c;是一个动态变化的过程。信息化已现代通信&#xff0c;网络、数据库技术为基础&#xff0c;将所有研究对象各个要素汇总至数据库&#xff0c;供特定人群生活、工作、学习、辅助决策等&#xff0c;…

前端基础(Vue的模块化开发)

目录 前言 响应式基础 ref reactive 学习成果展示 Vue项目搭建 总结 前言 前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用&#xff0c;接下来运用前面的基础继续学习Vue&#xff0c;运用前端模块化编程的思想。 响应式基础 ref reactive 关于ref和react…

linux:Temporary failure in name resolutionCouldn’t resolve host

所有域名无法正常解析。 ping www.baidu.com 等域名提示 Temporary failure in name resolution错误。 rootlocalhost:~# ping www.baidu.com ping: www.baidu.com: Temporary failure in name resolution rootlocalhost:~# 一、ubuntu/debian&#xff08;emporary failure i…

提升大数据技能,不再颓废!这6家学习网站是你的利器!

随着国家数字化转型&#xff0c;大数据领域对人才的需求越来越多。大数据主要研究计算机科学和大数据处理技术等相关的知识和技能&#xff0c;从大数据应用的三个主要层面&#xff08;即数据管理、系统开发、海量数据分析与挖掘&#xff09;出发&#xff0c;对实际问题进行分析…

学习笔记230810--get请求的两种传参方式

问题描述 今天写了一个对象方式传参的get请求接口方法&#xff0c;发现没有载荷&#xff0c;ip地址也没有带查询字符串&#xff0c;数据也没有响应。 代码展示 错误分析 实际上这里的query是对象方式带参跳转的参数名&#xff0c;而get方法对象方式传参的参数名是parmas 解…

华为OD机试 - 秘钥格式化 - 双指针(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

条件判断语句

二、判断语句 # 判断语句result10>15 print("10>5的结果是&#xff1a;%s"% result,type(result))eq"yl""yl" print("\"ylyl\" %s"% eq,type(eq))bool_1True bool_2False print(f"打印出类型,{bool_1},类型是{ty…

【论文笔记】MetaBEV: Solving Sensor Failures for BEV Detection and Map Segmentation

原文链接&#xff1a;https://arxiv.org/abs/2304.09801 1. 引言 目前&#xff0c;多模态融合感知中的一大问题在于忽视了传感器失效带来的影响。之前工作的主要问题包括&#xff1a; 特征不对齐&#xff1a;通常使用CNN处理拼接后的特征图&#xff0c;存在几何噪声时可能导致…

2023-8-14 前缀和

原题链接&#xff1a;前缀和 #include <iostream> using namespace std;const int N 100010;int n, m;int a[N], s[N];int main () {scanf("%d%d", &n, &m);for(int i 1; i < n; i ) scanf("%d", &a[i]);for(int i 1; i < n;…

Oracle Database12c数据库官网下载和安装教程

文章目录 下载安装Oracle自带的客户端工具使用 下载 进入oracle官网 点击下载连接之后右上角会有一个下载 我们只需要数据库本体就够了 运行这个下载器 等待下好之后即可 出现 Complete 之后代表下载成功&#xff0c;然后我们解压即可 安装 双击 双击setup.exe 根据…

windows电脑安装了多个版本python 用vscode编程如何指定版本

在状态栏中找到 Python 版本号。这个版本号表示当前正在使用的 Python 解释器版本。 如果需要切换到其他版本的 Python&#xff0c;请点击版本号&#xff0c;然后从列表中选择所需的 Python 版本。列表中的 Python 版本是按照安装顺序排列的。这里一般会有多个版本可供选择

URL编码指南

URL简介 URL 是统一资源定位符&#xff08;Uniform Resource Locator&#xff09;的缩写。它是用于在互联网上定位并访问资源的一种标识方式。 URL通常由以下几个组成部分组成&#xff1a; 协议&#xff08;Protocol&#xff09;&#xff1a;指示要使用的协议&#xff0c;如…

ubuntu 搜狗输入法安装 和 无法输入中文

一、下载搜狗输入法Linux版本。 搜狗输入法linux-首页 二、安装fcitx输入框架&#xff0c;及相关的依赖库 sudo apt install fcitx-bin sudo apt-get install fcitx-table sudo apt --fix-broken install 三、安装搜狗输入法 sudo dpkg -i sougou....deb 四、通过 设置&…