day26--AJAX(axios使用,http协议(部分),接口文档,form-serialize使用)

2023-10-09 23:30

本文主要是介绍day26--AJAX(axios使用,http协议(部分),接口文档,form-serialize使用),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

AJAX介绍:

什么是AJAX

怎么用AJAX?

axios的使用:

axios的核心配置:

url统一资源定位符:

组成:

http协议:

域名:

资源路径:

查询参数:

常用的请求方法method:

axios成功处理:

axios错误处理:

HTTP协议:

请求报文:

格式:

查看请求报文:

响应报文:

查看响应报文:

响应状态码:

接口文档:

form-serialize插件:

语法:


AJAX介绍:

是浏览器与服务器进行数据通信的技术,一个媒介。

让数据活起来。

什么是AJAX

怎么用AJAX?

axios的使用:

引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

axios的核心配置:

url统一资源定位符:

组成:

协议规定了浏览器和服务器传输数据的格式;域名规定了访问的是哪一台服务器的电脑;资源路径标识了要的资源在服务器中的具体位置

http协议:

有了协议就可以访问数据了吗?并不是的,还需要有访问的服务器的名字

域名:

资源路径:

 那若要进一步查询省份数据中的具体某一个省份呢?

→ 利用查询参数可以进行获取

查询参数:

params:{

参数名1:值1,

参数名2:值2

}

当属性名和变量名同名时可以进行简写,可以将变量名故意设置成与属性名同

参数名:pname,cname.

前面已可以从服务器中拿到数据,能否将数据提交到服务器上保存起来呢? 需要有向服务器的请求方法。

常用的请求方法method:

data:

data:{

属性名1:属性值,

属性名2:属性值

}

axios成功处理:

通过点语法调用then方法,

通过result.data.message/data(复制右键的属性路径,可以快速找到对应属性)

axios错误处理:

错误处理,比如账号被占用时会返回错误信息(这是浏览器返回的错误信息,需要让用户看到此错误信息)就需要用到错误处理。

错误处理 →  就是用更直观的方式,给普通用户展示错误信息。

error.response.data.message中有错误信息(复制右键的属性路径,可以快速找到对应属性)

HTTP协议:

请求报文:

格式:

查看请求报文:

点击查看源代码才是真实的请求报文。

查看请求报文,可以较快速地进行错误排查。

响应报文:

查看响应报文:

响应状态码:

接口文档:

是后端提供的描述接口相关信息的文章,前端可根据后端提供的来找到相应的填入信息来与服务器进行交互。

form-serialize插件:

帮助快速收集表单元素的值,不需要把逐个input标签获取过来。

语法:

1. 引入serialize的js插件

2. 获取表单form对象

3.serialize(form,{hash: , empty: }),确保input标签都有name名,否则获取得到的data为空对象。

这篇关于day26--AJAX(axios使用,http协议(部分),接口文档,form-serialize使用)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/176325

相关文章

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,:本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数