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。

相关推荐
月巴月巴白勺合鸟月半4 分钟前
一个医学编码的服务
服务器·前端·javascript
ycgg8 分钟前
深入理解 DOM 的 dispatchEvent API
前端
方也_arkling9 分钟前
【JS】定时器的使用(点击开始计时,再次点击停止计时)
开发语言·前端·javascript
JS_GGbond10 分钟前
Vue原型链:让你的组件继承“超能力”
前端·vue.js
乆夨(jiuze)13 分钟前
不是所有的链式调用,都是Promise函数,Promise 规范及其衍生的 Promise/A+ 规范
前端·javascript·vue.js
锦瑟弦音19 分钟前
跑酷游戏开发笔记3 && 游戏开始场景 cocos 3.8.7
javascript·笔记·游戏
MoonBit月兔27 分钟前
海外开发者实践分享:用 MoonBit 开发 SQLC 插件(其二)
开发语言·javascript·数据库·redis·mysql·moonbit
前端李易安28 分钟前
ERROR in ./node_modules/vue-router/dist/vue-router.mjs 被报错折磨半天?真相竟是……
前端·javascript·vue.js
monkey_slh28 分钟前
JS逆向实战——最新某东cfe滑块
开发语言·前端·javascript
禅思院31 分钟前
在win10上配置 Rust以及修改默认位置问题
开发语言·前端·后端·rust·cargo·mingw64·cargo安装位置