asp.net 开发的网站,th7 wordpress主题,建设职业技术学院网站,网站制作公司哪家比较好文章目录 前言一、Ajax技术#xff08;从服务端获取数据#xff0c;发送各种请求#xff09;0 接口文档管理#xff1a;使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例#xff08;几年前的早期用法#xff09; 二、 Axios技术(对原… 文章目录 前言一、Ajax技术从服务端获取数据发送各种请求0 接口文档管理使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例几年前的早期用法 二、 Axios技术(对原生的Ajax进行了封装)1 基本概念1Axios是什么2常见的请求方式有哪些 2 快速入门示例1入门案例示例2入门案例绑定事件 3 Axios通用请求格式语法示例1params传递参数发送get请求示例2data传递参数发送post请求综合案例地区查询 4 axios 错误处理 前言
本课程所有接口采用apifox模拟全部使用的是 B站-AJAX和黑马头条-数据管理平台 这个里面的接口进行测试 一、Ajax技术从服务端获取数据发送各种请求
参考视频 官方文档
0 接口文档管理使用apipost等接口测试软件创建接口便于前端后端分离测试
参考视频
接口文档管理 在线 apipostapifoxpostman等等 离线 wordmd
在线的apipost这些测试工具功能很多具体的后面不断深入学习慢慢了解这个测试工具这个测试工具必须会用后面无论是前端还是后端都需要频繁使用这个工具来进行测试。
下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。
1 基本概念 学习本节前建议先去学习什么是GET、POST请求这些 概念: Asynchronous JavaScript And XML异步的JavaScript和XML。 Ajax技术是一个异步交互技术通过这个Ajax技术我们就可以从服务端获取数据作用: 数据交换: 通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互: 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如: 搜索联想、用户名是否可 用的校验等等。 同步与异步请求区别 举一个例子就好理解了 我们在点击某些页面的时候如果网络不好界面就会一直卡在转圈圈的界面我们不能进行任何操作这就是同步请求如果我们点击某些页面就算网络不好我们还是可以操作页面例如我们下载文件这个请求就是典型的异步请求。 Ajax技术就是一项发送异步请求的技术了。
2 原生Ajax使用示例几年前的早期用法 太繁琐现在已经淘汰了解一下 可以使用网页版的apifox、或者apipost个人感觉apifox更好用界面更加清晰apipost界面有点复杂好多功能要摸索生成一个get请求响应数据作为测试 使用 1准备数据地址: http://hmajax.itheima.net/api/province 示例接口文档获取-省份列表2创建XMLHttpRequest对象: 用于和服务器交换数据3向服务器发送请求4获取服务器响应数据
示例
bodyinput typebutton value获取数据 onclick getData()div iddiv1/div
/bodyscriptfunction getData(){// 1 创建 XMLHttpRequest 对象var xmlHttpRequest new XMLHttpRequest();// 2 发送异步请求xmlHttpRequest.open(GET,http://hmajax.itheima.net/api/province);xmlHttpRequest.send(); // 发送请求// 3 获取服务器响应的数据xmlHttpRequest.onreadystatechange function(){if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){ // 判断服务器是否响应成功//var data JSON.parse(xmlHttpRequest.responseText);document.getElementById(div1).innerHTML xmlHttpRequest.responseText;// xmlHttpRequest.responseText 返回服务器响应的数据以字符串形式返回}}}/script查看结果
代码解释 官方文档
二、 Axios技术(对原生的Ajax进行了封装)
1 基本概念
1Axios是什么
参考视频
介绍:Axios 对原生的Ajax进行了封装简化书写快速开发。官网(使用文档等): https://www.axios-http.cn/ Axios 是一个基于 promise 的网络请求库可以用于浏览器和 node.js
2常见的请求方式有哪些
请求方法: 对服务器资源要执行的操作
请求方法操作GET获取数据POST提交数据PUT修改数据(全部)DELETE删除数据PATCH修改数据(部分)
比较常用的就是get和post请求其余的说实话post请求好像也都能干
2 快速入门 step1: 引入Axios的js文件 script src“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”/script 使用 axios 函数发送请求并获取响应结果 1传入配置对象 2再用 .then 回调函数接收结果并做后续处理 下面的语法默认是get请求
示例1入门案例
参考视频 需求: 请求目标资源地址拿到省份列表数据显示到页面 目标资源地址: http://hmajax.itheima.net/api/province 接口文档说明
body!--axios库地址https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--p classmy-p/p/bodyscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 2. 使用axios函数axios({url: http://hmajax.itheima.net/api/province}).then(result {console.log(result)// 好习惯多打印确认属性名console.log(result.data.list)console.log(result.data.list.join(br))// 把准备好省份列表插入到页面document.querySelector(.my-p).innerHTML result.data.list.join(br) })/script结果
示例2入门案例绑定事件
body!--axios库地址https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--bodyinput typebutton value获取数据 onclick getData()div iddiv1/div/body/bodyscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptfunction getData(){// 通过axios发送异步请求,默认是GET请求axios({url: http://hmajax.itheima.net/api/province}).then(result {document.getElementById(div1).innerHTML result.data.list.join(br);// 通过 result.data 获取服务器返回的的JSON对象})}/script结果
3 Axios通用请求格式语法
通用请求格式语法
axios({method: post, // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patchurl: /user/123, // 注意 参数传递的那部分要写写到params里面去data: { ... }, // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去params: { ... }, // 写到这个里面的请求参数会拼接到 url 中发送出去 http://xxxx.com/xxx/xxx?参数名1值1参数名2值2
});一般地
url中要传递参数数据就写到params里面去get,post方法可以data里面可以传任何参数特别是文件上传、json、xml等结构化数据都通过这个传所以POST/PUT 数据会比较多误区params只能传递get数据、data只能传POST/PUT 数据这个结合后端的接收请求接口就好理解了除了urlmethoddataparams都是可选项根据实际情况判断是否要不要
具体的怎么发送还是要看后端接口是怎么写的 RequestBody 参数来源是请求体中的json等结构化数据 RequestParam 参数来源可以是url或者请求体的表单数据 RequestPart用于上传文件参数来源是请求体中的表单数据 PathVariable参数来源是url中的路径变量
示例1params传递参数发送get请求
语法: 使用 axios 提供的 params 选项注意: axios 在运行时把参数名和值会拼接到 url?参数名值城市列表: http://hmajax.itheima.net/api/city?pname河北省 接口文档
body!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--p/pscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptaxios({url: http://hmajax.itheima.net/api/city,// 查询参数params: {pname: 辽宁省}}).then(result {console.log(result.data.list)document.querySelector(p).innerHTML result.data.list.join(br)})/script
/body结果
示例2data传递参数发送post请求
参考视频
需求 接口文档
bodybutton classbtn注册用户/buttonscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*注册用户http://hmajax.itheima.net/api/register请求方法POST参数名username用户名中英文和数字组成最少8位password密码 最少6位目标点击按钮通过axios提交用户和密码完成注册*/document.querySelector(.btn).addEventListener(click, () {axios({url: http://hmajax.itheima.net/api/register,method: POST,data: {username: hejuzs_01, // 注意重新注册用户名要修改同样用户名不能注册两次password: hejuzs_01}})})/script
/body结果
综合案例地区查询
参考视频
需求 接口文档
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title案例_地区查询/title!-- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css --link relstylesheet hrefhttps://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.cssstyle:root {font-size: 15px;}body {padding-top: 15px;}/style
/headbodydiv classcontainerform ideditForm classrow!-- 输入省份名字 --div classmb-3 collabel classform-label省份名字/labelinput typetext value北京 nameprovince classform-control province placeholder请输入省份名称 //div!-- 输入城市名字 --div classmb-3 collabel classform-label城市名字/labelinput typetext value北京市 namecity classform-control city placeholder请输入城市名称 //div/formbutton typebutton classbtn btn-primary sel-btn查询/buttonbrbrp地区列表: /pul classlist-group!-- 示例地区 --li classlist-group-item东城区/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector(.sel-btn).addEventListener(click, () {// 2. 获取省份和城市名字let p_name document.querySelector(.province).valuelet c_name document.querySelector(.city).value// 3. 基于axios请求地区列表数据axios({url: http://hmajax.itheima.net/api/area,params: {pname:p_name,cname:c_name}}).then(result {// console.log(result)// 4. 把数据转li标签插入到页面上let list result.data.listconsole.log(list)let theLi list.map(areaName li classlist-group-item${areaName}/li).join()console.log(theLi)document.querySelector(.list-group).innerHTML theLi})})/script
/body/html结果
4 axios 错误处理
参考视频 语法:在 then 方法的后面通过点语法调用 catch 方法传入回调函数并定义形参 处理:注册案例重发注册时通过弹框提示用户错误原因 需求
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleaxios错误处理/title
/headbodybutton classbtn注册用户/buttonscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector(.btn).addEventListener(click, () {axios({url: http://hmajax.itheima.net/api/register,method: post,data: {username: hejuzs_01,password: hejuzs_01}}).then(result {// 成功console.log(result)}).catch(error { // error里面可以捕获到错误信息如果后端的java接口抛出异常信息返回了了一个状态码不正常的响应信息那么就会进入到catch里面捕获到// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})/script
/body/html结果
