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为空对象。

注意单选框的获取:

需要单选选项都添加类名 且有value值,在获取时,会获取checked='true'的单选框所对应的value。

相关推荐
2301_7994049114 分钟前
深入XMLHttpRequest与Promise:从原生请求到封装axios实战
ajax
同志3271331 分钟前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟32 分钟前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境32 分钟前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
CJWbiu35 分钟前
Github Action + docker 实现自动化部署
前端·自动化运维
关山36 分钟前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i36 分钟前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨40 分钟前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
猫头虎1 小时前
如何解决IDE项目启动报错 error:0308010C:digital envelope routines::unsupported 问题
javascript·ide·vue.js·typescript·node.js·编辑器·vim
Mintopia1 小时前
Three.js 在数字孪生中的应用场景教学
前端·javascript·three.js