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

Ajax从零到实战

news 2026/2/10 12:04:37

  💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。



非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Ajax的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Ajax从0到1实现项目，希望广大网友一起监督学习，互相进步!

目录

什么是 AJAX ?

引入 axios.js 文件到自己的网页中

URL 查询参数

1. 查询参数的语法 

2. axios 如何携带查询参数?

查询地区列表案例

axios错误处理

请求报文--错误排查

form-serialize 插件

什么是 AJAX ?

  • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

  • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

引入 axios.js 文件到自己的网页中

axios.js文件链接:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

axios函数的使用语法

axios({url: '目标资源地址'
}).then((result) => {// 对服务器返回的数据做后续处理
})

URL 查询参数

1. 查询参数的语法 

  • 在 url 网址后面用?拼接格式：XXXX?参数名1=值1&参数名2=值2

  • 参数名一般是后端规定的，值前端看情况传递即可

2. axios 如何携带查询参数?

查询城市列表的 url地址：http://hmajax.itheima.net/api/city

axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

查询地区列表案例

查询地区: http://hmajax.itheima.net/api/area

/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/
// 目标: 根据省份和城市名字, 查询地区列表
// 1. 查询按钮-点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let pname = document.querySelector('.province').valuelet cname = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})
})

axios错误处理

当用户已经注册过，再次点击注册按钮的时候，就会报错，那么我们要怎么处理呢?

<!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>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户：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: '大学生小郑123',password: '7654321'}}).then(result => {console.log(result)}).catch(error => {console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

请求报文--错误排查

当我点击登录的时候，发现密码错误，那么我们要怎么排查错误呢?

流程：

1.确认信息是否在请求报文正确携带

2.发现密码错误 返回到代码查看

form-serialize 插件

       使用serialize函数，快速收集表单元素的值

       * 参数1：要获取哪个表单的数据

       *  表单元素设置name属性，值会作为对象的属性名

       *  建议name属性的值，最好和接口文档参数名一致

       * 参数2：配置对象

       *  hash 设置获取数据结构

       *    - true：JS对象（推荐）一般请求体里提交给服务器

       *    - false: 查询字符串

       *  empty 设置是否获取空值

       *    - true: 获取空值（推荐）数据结构和标签结构一致

       *    - false：不获取空值

      

<script src="./lib/form-serialize.js"></script><script>document.querySelector('.btn').addEventListener('click', () => {const form = document.querySelector('.example-form')const data = serialize(form, { hash: true, empty: true })// const data = serialize(form, { hash: false, empty: true })// const data = serialize(form, { hash: true, empty: false })console.log(data)})</script>

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

相关文章：

Ajax从零到实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

编程日记 2024/7/14 19:04:16

编程参考 - 在C++移动构造函数声明中使用noexcept

在 C 中&#xff0c;noexcept 是用于表示函数不抛出异常的指定符。它既可用于常规函数&#xff0c;也可用于特殊成员函数&#xff0c;包括构造函数和析构函数。使用 noexcept 可以帮助编译器进行优化&#xff0c;提高代码的安全性和正确性。 In C, noexcept is a specifier use…...

编程日记 2024/7/14 19:02:15

Vue2/Vue3实现全局/局部添加防篡改水印的效果。删除元素无效！更改元素属性无效！支持图片、元素、视频等等。

水印目的 版权保护：水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息，以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时，可以追溯到原始作者或版权所有者，从而加强版权保护。 身份识别：水印可以用作作者或品牌的标识符，使观众能够轻松识…...

编程日记 2024/7/14 19:01:13

GuLi商城-商品服务-API-属性分组-获取分类属性分组

获取分类属性分组接口开发 操作的是这张表 造数据： 后台代码： @Override public PageUtils queryPage(Map<String, Object> params, Long catelogId) {//select * from pms_attr_group where catelog_id=? and (attr_group_id=key or attr_group_name like %key%)Stri…...

编程日记 2024/7/14 19:00:12

安全测试理论

安全测试理论 什么是安全测试&#xff1f; 安全测试&#xff1a;发现系统安全隐患的过程安全测试与传统测试区别 传统测试&#xff1a;发现bug为目的 安全测试&#xff1a;发现系统安全隐患什么是渗透测试 渗透测试&#xff1a;已成功入侵系统为目标的的攻击过程渗透测试与安全…...

编程日记 2024/7/14 18:58:10

序列化和反序列化

面试题&#xff1a;对序列化和反序列化的理解&#xff1f; 我们之所以需要序列化&#xff0c;它核心的目的是为了解决网络通信之间的对象传输的问题&#xff0c;也就是说&#xff0c;如何把当前JVM进程的一个对象&#xff0c;通过跨网络传输到另一个JVM进程里面&#xff0c;而序…...

编程日记 2024/7/14 18:57:09

OpenCV中使用Canny算法在图像中查找边缘

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 算法描述 Canny算法是一种广泛应用于计算机视觉和图像处理领域中的边缘检测算法。它由John F. Canny在1986年提出&#xff0c;旨在寻找给定噪声条件下的最佳边…...

编程日记 2024/7/14 18:56:08

基于springboot+vue+uniapp的机电公司管理信息系统

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…...

编程日记 2024/7/14 18:50:02

电子期刊制作实战教程：从零开始制作

​随着互联网的普及&#xff0c;电子期刊已经成为了信息传递的重要载体。它以便捷、环保、互动性强等特点受到了越来越多人的青睐。那么&#xff0c;如何从零开始制作一份吸引人的电子期刊呢&#xff1f; 1.要制作电子杂志,首先需要选择一款适合自己的软件。比如FLBOOK在线制作…...

编程日记 2024/7/14 18:49:01

11.FreeRTOS_事件组

事件组概述 事件组的作用&#xff1a; 可以等待某一个事件发生可以等待若干个事件发生可以等待若干个事件中的某一个事件发生 同步点是事件组的另一个使用方式&#xff0c;它可以让多个任务进行阻塞等待&#xff0c;当全部事件完成后&#xff0c;再一起解除任务的阻塞。常常…...

编程日记 2024/7/14 18:47:00

Python爬虫-爬取三国演义文本数据-bs4

bs4进行数据解析 -数据解析的原理: - 1.标签定位 -2.提取标签、标签属性中存储的数据值 - bs4数据解析的原理: - 1.实例化一个BeautifulSoup对象,并且将页面源码数据加载到该对象中 -2.通过调用BeautifulSoup对象中相关的属性或者方法进行标签定位和数据提取 - 环境安装: - pi…...

编程日记 2024/7/14 18:43:57

html5——列表、表格

目录 列表 无序列表 有序列表 自定义列表 表格 基本结构 示例 表格的跨列 表格的跨行 列表 无序列表 <ul>【声明无序列表】 <li>河间驴肉火烧</li>【声明列表项】 <li>唐山棋子烧饼</li> <li>邯郸豆沫</li> <l…...

编程日记 2024/7/14 18:39:54

【Python字符串攻略】：玩转文字，编织程序的叙事艺术

文章目录 &#x1f680;一.字符串基础&#x1f308;二.查看数据类型⭐三.转化❤️四.字符串索引&#x1f6b2;五.字符串切片&#x1f3ac;六.字符串切片-步长☔七.反向切片注意事项&#x1f6b2;八.字符串&#x1f4a5;查&#x1f4a5;改&#x1f4a5;删 ❤️九.字符串拼接&…...

编程日记 2024/7/14 18:36:52

element form表单中密码框被自动赋值，并默认背景色为白色，手动输值后背景色才是自己配置的背景色，与表单的自动填充有关

事件背景&#xff1a; 一个表单&#xff0c;有两组需要输入密码的地方&#xff0c;两组都被填充用户名密码&#xff0c;其中一组是其他信息&#xff0c;不是用户名密码&#xff0c;也被填充了&#xff0c;且input背景色是白色&#xff0c;表单中的input已经手动配置为无背景色&…...

编程日记 2024/7/14 18:35:51

【UE5.1 角色练习】15-枪械射击——子弹发射物

目录 效果 步骤 一、创建并发射子弹 二、优化子弹 效果 步骤 一、创建并发射子弹 1. 在前面的文章中&#xff08;【UE5.1 角色练习】06-角色发射火球-part1&#xff09;我们创建了蓝图“BP_Skill_FireBall” 这里我们复制一份命名为“BP_Ammo_5mm”&#xff0c;用于表示…...

编程日记 2024/7/14 18:34:50

Zynq7000系列FPGA中的DMA控制器的编程限制

有关DMAC编程时适用的限制信息&#xff0c;有四个考虑因素&#xff1a; 固定非对齐突发Endian swap size restrictions&#xff1a;在数据传输或处理过程中&#xff0c;不同字节序&#xff08;Endian&#xff09;之间的转换和对应的限制在DMA周期内更新通道控制寄存器当MFIFO满…...

编程日记 2024/7/14 18:33:49

超简易高效的 AI绘图工具—与sd-webui一致界面，6G显存最高提升75%出图速率！（附安装包）

大家好&#xff0c;我是灵魂画师向阳 今天给大家分享一个基于Stable Diffusion WebUI 构建的AI绘图工具—sd-webui-forge&#xff0c;该工具的目标在于简化插件开发&#xff0c;优化资源管理&#xff0c;加速推理。 Forge承诺永远不会对Stable Diffusion WebUI用户界面添加不…...

编程日记 2024/7/14 18:30:47

ArduPilot开源代码之OpticalFlow_backend

ArduPilot开源代码之OpticalFlow_backend 1. 源由2. Library设计3. 重要例程3.1 OpticalFlow_backend::_update_frontend3.2 OpticalFlow_backend::_applyYaw 4. 总结5. 参考资料 1. 源由 光流计是一种低成本定位传感器&#xff0c;所有的光流计设备传感驱动代码抽象公共部分统…...

编程日记 2024/7/14 18:28:45

设计模式探索：适配器模式

1. 适配器模式介绍 1.1 适配器模式介绍 适配器模式&#xff08;adapter pattern&#xff09;的原始定义是&#xff1a;将一个类的接口转换为客户期望的另一个接口&#xff0c;适配器可以让不兼容的两个类一起协同工作。 适配器模式的主要作用是把原本不兼容的接口&#xff0c…...

编程日记 2024/7/14 18:27:44

OpenCV 寻找棋盘格角点及绘制

目录 一、概念 二、代码 2.1实现步骤 2.2完整代码 三、实现效果 一、概念 寻找棋盘格角点&#xff08;Checkerboard Corners&#xff09;是计算机视觉中相机标定&#xff08;Camera Calibration&#xff09;过程的重要步骤。 OpenCV 提供了函数 cv2.findChessboardCorners…...

编程日记 2024/7/14 18:24:40

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/10 10:35:58

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/12/7 23:28:25