当前位置：首页 > news >正文

十四(AJAX)、AJAX、axios、常用请求方法(GET POST...)、HTTP协议、接口文档、form-serialize

news 来源：原创 2025/5/7 0:46:32

1. AJAX介绍及axios基本使用

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>AJAX介绍及axios基本使用</title>
</head><!-- 
AJAX定义：AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用
XMLHttpRequest(XHR)对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。概念：AJAX是一种与服务器通信的技术
--><body><p class="province"><p></p><!-- 数据渲染到这里 --></p><button class="btn">渲染省份数据</button><!-- 请求库axios → 和服务器通信 --><!-- axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址: http://hmajax.itheima.net/api/province需求: 点击按钮 通过 axios 获取省份数据 并渲染--><!-- 使用axios记得先导包 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>const btn = document.querySelector('.btn')const province = document.querySelector('.province')btn.addEventListener('click', function () {axios({// 发请求：调用axios函数，传入配置url: 'http://hmajax.itheima.net/api/province'}).then(res => {// 接收并使用数据：通过点语法调用then方法，传入回调函数并定义形参(比如res)province.innerHTML = res.data.list.join('-')})})</script>
</body></html>

2. 认识URL

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>认识URL</title>
</head><!-- URL定义：URL 代表着是统一资源定位符（Uniform Resource Locator）。URL 无非就是一个给定的独特资源在 Web 上的地址。理论上说，每个有效的 URL 都指向一个唯一的资源。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等。URL概念：资源在网络上的地址URL常见组成部分：举例(http://hmajax.itheima.net/api/news)协议(http:)、规定了浏览器发送及服务器返回内容的格式，常见的有 http、https域名(hmajax.itheima.net)、域名表示正在请求网络上的哪个服务器资源路径(api/news)、资源在服务器的位置，资源和路径的对应关系由服务器决定
--><body><button class="btn">获取新闻数据并输出</button><!-- 1. 导包 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 新闻地址:http://hmajax.itheima.net/api/news需求: 点击按钮 通过axios 获取新闻数据 并输出--><script>axios({url: 'http://hmajax.itheima.net/api/news'}).then(res => {console.log(res)console.log(res.data)console.log(res.data.data)})</script>
</body></html>

3. URL查询参数介绍及使用

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- URL查询参数是提供给网络服务器的额外参数。这些参数是用 & 符号分隔的键/值对列表。查询参数的格式：?隔开之后使用&分隔的键值对列表
--><body><button class="btn">获取城市数据并渲染</button><ul><!-- <li>郑州市</li> --></ul><!-- 1. 导包 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 城市数据:http://hmajax.itheima.net/api/city获取某个省所有的城市查询参数名:pname说明:传递省份或直辖市名比如 北京、广东省…http://hmajax.itheima.net/api/city?pname=北京需求: 点击按钮 通过axios 获取某个省的城市 并输出--><script>const btn = document.querySelector('.btn')const ul = document.querySelector('ul')btn.addEventListener('click', function () {axios({// 获取河南省所有的城市url: 'http://hmajax.itheima.net/api/city?pname=河南省'}).then(res => {// console.log(res)let str = res.data.list.map(itme => {return `<li>${itme}</li>`}).join('')ul.innerHTML = str})})</script></body></html>

案例1_报错信息百度跳转查询

  <script>// try catch尝试执行代码，如果出错，把报错信息发到百度去搜索try {const p = document.querySelector('p')p.innerHTML = 'hhh'} catch (error) {location.href = `https://www.baidu.com/s?word=${error}`}</script>

使用axios传递查询参数 params

4. 案例2_地区查询

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-区县查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head><body><div class="container"><form class="row"><div class="mb-3 col"><label class="form-label">省份/直辖市名字</label><!-- 省份输入框 --><input type="text" value="北京" class="form-control province" placeholder="请输入省份名称" /></div><div class="mb-3 col"><label class="form-label">城市名字</label><!-- 城市输入框 --><input type="text" value="北京市" class="form-control city" placeholder="请输入城市名称" /></div></form><!-- 查询按钮 --><button type="button" class="btn btn-primary my-button">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 渲染的列表项 --><!-- <li class="list-group-item">东城区</li> --></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script><!-- 案例核心代码 --><script src="./js/index.js"></script>
</body></html>

js

/*http://hmajax.itheima.net/api/area传递某个省份内某个城市的所有区县查询参数名：pname、cnamepname说明：传递省份或直辖市名，比如 北京、湖北省…cname说明：省份内的城市，比如 北京市、武汉市…核心功能：查询地区，并渲染列表
*/const province = document.querySelector(".province");
const city = document.querySelector(".city");
const myBtn = document.querySelector(".my-button");
const listGroup = document.querySelector(".list-group");myBtn.addEventListener("click", function () {const pname = province.value;const cname = city.value;axios({// 1. & 拼接查询参数// url: `http://hmajax.itheima.net/api/area?pname=${province.value}&cname=${city.value}`,// 2. paramsurl: `http://hmajax.itheima.net/api/area`,params: {/* pname: province.value,cname: city.value, */// ES6对象属性赋值的简写: 属性名和变量名相同pname,cname,},}).then((res) => {// console.log(res);let str = res.data.list.map((item) => {return `<li class="list-group-item">${item}</li>`;}).join("");listGroup.innerHTML = str;});
});

5. 常用请求方法和数据提交

params：查询参数。GET 请求; 对应query，

data：提交数据，用于设置请求体的数据。通常用于 POST、PUT 和 PATCH 请求，对应body。

6. axios错误处理

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><!-- 1. 常用请求方法和数据提交请求方法表明对服务器资源执行的操作。最为常用的是POST提交数据和GET查询数据GET 获取数据（默认方法）POST 提交数据PUT 修改数据（全部）DELETE 删除数据PATCH 修改数据（部分）
-->
<!-- 2. axios错误处理
--><body><button class="btn">注册用户</button><!-- 1. 导包 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 请求地址(url)：http://hmajax.itheima.net/api/register注册用户请求方法：POST参数：username，password说明：username 用户名（中英文和数字组成, 最少8位），password 密码（最少6位）需求：点击按钮 通过axios提交用户数据，完成用户注册--><script>document.querySelector('.btn').addEventListener('click', function () {axios({// url：请求的URL地址url: 'http://hmajax.itheima.net/api/register',// method：请求的方法，GET可以省略（不区分大小写）method: 'post',// params：用于设置 URL 的查询参数。通常用于 GET 请求，因为 GET 请求通常将数据作为 URL 的一部分发送。// data：提交数据，用于设置请求体的数据。通常用于 POST、PUT 和 PATCH 请求，因为这些请求通常将数据作为请求体发送。// 注意：在接口文档上params通常对应query，data通常对应body。data: {username: 'Tom1Jerry',password: '123456abc'}}).then(res => {console.log(res.data)alert(res.data.message)}).catch(error => {// 在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参// 失败的结果console.log(error)alert(error.response.data.message)})})axios({// 请求选项}).then(res => {// 处理数据}).catch(err => {// 处理错误})// status:200,statusText:'OK' 发请求成功// status:400 服务器报错 404页面没找到 catch抓错</script></body></html>

7. HTTP协议-请求报文

8. HTTP协议-响应报文

<!-- 2XX 表示成功3XX 表示重定向4XX 表示客户端错误5XX 表示服务端错常见的状态码：200 最喜欢见到的状态码，表示请求成功301 永久重定向302 临时重定向304 自上次请求，未修改的文件400 错误的请求401 未被授权，需要身份验证，例如token信息等等403 请求被拒绝404 资源缺失，接口不存在，或请求的文件不存在等等500 服务器端的未知错误502 网关错误503 服务暂时无法使用
-->

9. 接口文档

<body><button class="btn">用户登录</button><!-- 1. 导包 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><!-- 接口文档：由后端提供的描述接口的文章接口：使用AJAX和服务器通讯时，使用的 URL，请求方法，以及参数--><script>document.querySelector('.btn').addEventListener('click', function () {axios({url: 'https://hmajax.itheima.net/api/login',method: 'post',data: {username: 'Tom1Jerry',// password: '123456abc'password: '123456ac'}}).then(res => {console.log(res)alert(res.data.message)}).catch(error => {alert(error.response.data.message)})})</script></body>

常见的接口管理平台

企业在进行软件开发时，通常会使用接口管理平台来帮助管理和维护应用程序接口（API）。这些平台可以帮助开发者设计、测试、部署和监控 API，从而提高开发效率和软件质量。以下是一些常用的接口管理平台：

1. Postman：Postman 是一款广泛使用的 API 开发和测试工具，它支持多种 HTTP 方法和自定义请求头，可以方便地发送各种类型的请求。Postman 还提供了丰富的功能，如接口文档生成、接口测试脚本编写、接口监控、Mock 服务器等。

2. Swagger：Swagger 是一款开源的 API 设计工具，它可以帮助开发者设计、构建、记录和使用 RESTful API。Swagger 提供了一种易于理解的 API 设计语言，可以生成可读性强的 API 文档。

3. YApi：YApi 是一款由去哪儿网开源的、面向接口开发的、功能强大的、易于上手的开源接口管理工具。它提供接口的管理、测试、mock、监控等功能，可以大大提高开发效率。

4. Apifox：Apifox 是一款出色的 API 设计和管理工具，主要服务于 API 的开发、测试、模拟、文档生成和团队协作等需求。

5. Eolinker： Eolinker是一个专业的API管理平台，旨在帮助开发团队更好地设计、开发和管理API。它提供了一系列功能和工具，以简化API的创建、文档编写、测试、版本管理和安全控制等任务。

10. 案例3-用户登录

document.querySelector(".btn-login").addEventListener("click", function () {const username = document.querySelector(".username").value;const password = document.querySelector(".password").value;axios({url: "https://hmajax.itheima.net/api/login",method: "post",data: {username,password,},}).then((res) => {if (res.status == 200) {myAlert(res.data.message, true);}}).catch((error) => {// console.log(error);myAlert(error.response.data.message, false);});
});

11. form-serialize插件

<body><form action="javascript:;" class="example-form"><input type="text" name="uname" /><br><input type="text" name="pword" /><br><input type="submit" class="submit" value="提交" /></form><!-- 1. 导包 --><script src="./lib/form-serialize.js"></script><script>/*form-serialize 快速收集表单元素的值1. 表单元素需要设置name属性，会成为对象的属性名2. name属性设置的值和接口文档一致即可3. hash 设置生成的数据格式- true：js对象（常用）- false：查询字符串4. empty 是否收集空数据- true：收集空数据，保证格式和表单一致（推荐用法）- false：不收集空数据，格式和表单不一定一致（不推荐）const form = document.querySelector('.example-form')const data = serialize(form, { hash: true, empty: true })*/document.querySelector('.submit').addEventListener('click', function () {const form = document.querySelector('.example-form')const data = serialize(form, { hash: true, empty: true })console.log(data)})</script>
</body>

12. 案例4-用户登录(整合form-serialize)

document.querySelector(".btn-login").addEventListener("click", function () {const form = document.querySelector("form");const data = serialize(form, { hash: true, empty: true });axios({url: "https://hmajax.itheima.net/api/login",method: "post",data,}).then((res) => {if (res.status == 200) {// myAlert(res.data.message, true);alert(res.data.message);}}).catch((error) => {// console.log(error);// myAlert(error.response.data.message, false);alert(error.response.data.message);});
});

13. 作业

13.1 问答机器人

  <script>// 获取机器人回答消息 - 接口地址: http://hmajax.itheima.net/api/robot// 查询参数名: spoken// 查询参数值: 我说的消息/*在输入框中输入信息，点击发送或者按回车键能够将发送消息展示到页面发送消息以后，机器人回复消息并将其展示到页面上*//* 思路分析发送消息1.1 绑定点击事件1.2 绑定keyup事件展示发送信息2.1 获取输入框内容，并显示到页面上2.2 清空输入框内容2.3 让滚动条始终在底部展示机器人回复信息3.1 调用接口, 获取机器人返回消息3.2 把机器人消息设置到页面上3.3 让滚动条始终在底部*/const chatInput = document.querySelector('.chat_input')const chatList = document.querySelector('.chat_list')const chatDiv = document.querySelector('.chat')const sendImg = document.querySelector('.send_img')function chat() {// spoken 要发给机器人的聊天消息const spoken = chatInput.valueconst newLi1 = document.createElement('li')newLi1.classList.add('right')newLi1.innerHTML = `<span>${spoken}</span><img src="./assets/me.pngalt="">`chatList.append(newLi1)// 让滚动条始终在底部chatDiv.scrollTop = chatDiv.scrollHeight// 输入框清空chatInput.value = ''axios({url: 'https://hmajax.itheima.net/api/robot',// getparams: {spoken,}}).then(res => {// console.log(res)// console.log(res.data.data.info)// console.log(res.data.data.info.text)const newLi2 = document.createElement('li')newLi2.classList.add('left')newLi2.innerHTML = `<img src="./assets/you.png" alt=""><span>${res.data.data.info.text}</span>`chatList.append(newLi2)// 让滚动条始终在底部chatDiv.scrollTop = chatDiv.scrollHeight}).catch(error => {console.log(error)// console.log(error.response.data.message)})}// 回车键发送信息chatInput.addEventListener('keyup', function (e) {// console.log(e.key)if (e.key === 'Enter') {// console.log(11)chat()}})// 点击发送按钮发送信息sendImg.addEventListener('click', function () {chat()})</script>

13.2 必要商城搜索功能

// 目标: 点击搜索按钮(放大镜), 根据关键词搜索商品并铺设列表
const searchInp = document.querySelector('#searchInp')
const searchButton = document.querySelector('#searchButton')searchButton.addEventListener('click', function () {const searchText = searchInp.valueconst categoryList = document.querySelector('.category-list')axios({url: `https://hmajax.itheima.net/api-s/searchGoodsList`,params: {searchText,},}).then((res) => {console.log(res.data.list.data[0])let str = res.data.list.data.map((item) => {const { evalNum, goodsName, goodsPrice, imageUrl, newStatus, sellCount } = itemreturn `<li><a><i><img src="${imageUrl}"></i><div class="supplier">祖玛珑同原料制造商</div><div class="title">${goodsName}</div><div class="priceBox"><div class="price" price="${goodsPrice}"><span style="color: #F7A701; font-size: 12px; padding-left: 2px;">￥<spanstyle="font-size:18px;">${goodsPrice}</span></span></div><div class="mack"><span style="color:#FB4C81;background:#FFFFFF; border-color:#FB4C81">一起拼</span><spanstyle="color:#FFFFFF;background:#AB7FD1; border-color:#AB7FD1">精选</span></div></div><div class="evaluate">${evalNum}条好评</div></a></li>`;}).join("");categoryList.innerHTML = str;});
})