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

Ajax从零到实战

news 文章来源：https://blog.csdn.net/m0_74948742/article/details/140348729 2025/4/29 4:23:50

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



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

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习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

【深度学习】PyTorch深度学习笔记02-线性模型

1. 监督学习 2. 数据集的划分 3. 平均平方误差MSE 4. 线性模型Linear Model - y x * w 用穷举法确定线性模型的参数 import numpy as np import matplotlib.pyplot as pltx_data [1.0, 2.0, 3.0] y_data [2.0, 4.0, 6.0]def forward(x):return x * wdef loss(x, y):y_pred…...

编程日记 2024/7/14 18:21:37

10.FreeRTOS_互斥量

互斥量概述 在博文“ FreeRTOS_信号量 ”中&#xff0c;使用了二进制信号量实现了互斥&#xff0c;保护了串口资源。博文链接如下&#xff1a; FreeRTOS_信号量-CSDN博客 但还是要引入互斥量的概念。互斥量与二进制信号量相比&#xff0c;能够多实现如下两个功能&#xff1a…...

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

EtherCAT总线冗余让制造更安全更可靠更智能

冗余定义 什么是总线冗余功能&#xff1f;我们都知道&#xff0c;EtherCAT现场总线具有灵活的拓扑结构&#xff0c;设备间支持线型、星型、树型的连接方式&#xff0c;其中线型结构简单、传输效率高&#xff0c;大多数的现场应用中也是使用这种连接方式&#xff0c;如下图所示…...

编程日记 2024/7/14 18:15:31

Android IdleHandler源码分析

文章目录 Android IdleHandler源码分析概述前提基本用法源码分析添加和删除任务执行任务 应用场景 Android IdleHandler源码分析 概述 IdleHandler是一个接口&#xff0c;它定义在MessageQueue类中&#xff0c;用于在主线程的消息队列空闲时执行一些轻量级的任务。IdleHandle…...

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

Mac安装stable diffusion 工具

文章目录 1.安装 Homebrew2.安装 stable diffusion webui 的依赖3.下载 stable diffusion webui 代码4.启动 stable diffusion webui 本体5.下载模型6.这里可能会遇到一个clip-vit-large-patch14报错 参考&#xff1a;https://brew.idayer.com/install/stable-diffusion-webui/…...

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

CVE-2024-6387Open SSH漏洞彻底解决举措（含踩坑内容）

一、漏洞名称 OpenSSH 远程代码执行漏洞(CVE-2024-6387) 二、漏洞概述 Open SSH是基于SSH协议的安全网络通信工具&#xff0c;广泛应用于远程服务器管理、加密文件传输、端口转发、远程控制等多个领域。近日被爆出存在一个远程代码执行漏洞&#xff0c;由于Open SSH服务器端…...

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

python的简单爬取

需要的第三方模块 requests winr打开命令行输入cmd 简单爬取的基本格式&#xff08;爬取百度logo为例&#xff09; import requests url"http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" resprequests.get(url)#回应 #保存到本地 with open(&…...

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

【WEB前端2024】3D智体编程：乔布斯3D纪念馆-第60集-agent训练资讯APP重点推荐AI资讯内容（含视频）

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第60集-agent训练资讯APP重点推荐AI资讯内容&#xff08;含视频&#xff09; 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。d…...

编程日记 2024/7/14 18:04:21

【学术会议征稿】第三届智能电网与能源系统国际学术会议

第三届智能电网与能源系统国际学术会议 2024 3rd International Conference on Smart Grid and Energy Systems 第三届智能电网与能源系统国际学术会议&#xff08;SGES 2024&#xff09;将于2024年10月25日-27日在郑州召开。 智能电网可以优化能源布局&#xff0c;让现有能源…...

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

01. 课程简介

1. 课程简介 本课程的核心内容可以分为三个部分&#xff0c;分别是需要理解记忆的计算机底层基础&#xff0c;后端通用组件以及需要不断编码练习的数据结构和算法。 计算机底层基础可以包含计算机网络、操作系统、编译原理、计算机组成原理&#xff0c;后两者在面试中出现的频…...

编程日记 2024/7/14 17:59:15