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

Ajax 黑马学习

news 2026/2/9 1:33:16

Ajax

资源

数据是服务器对外提供的资源,通过 请求 - 处理 - 响应方式获取

请求服务器数据, 用到 XMLHttpRequest 对象

XMLHttpRequest 是浏览器提供的js成员, 通过它可以请求服务器上的数据资源

image-20230724232141774

let xmlHttpRequest = new XMLHttpRequest();

请求方式 : get向服务器获取数据 post往服务器发送数据

Ajax 就是 用 XMLHttpRequest 对象和服务器进行数据交互

+++

image-20230724233539844

jQuery 中的 Ajax

$get 函数

$.get(url{必选}, [data], [callback]) ([请求地址], [请求资源携带参数], [请求成功回调函数])

$post函数

$.post(url, [data], [callback])

$ajax 函数

$.ajax({

​ type: ‘’,//请求方式, GET 或 POST

​ url: ‘’, //请求url地址

​ data: {}, //请求携带数据

​ success: function(res) }{ } // 请求成功后的回调函数

})

image-20230725093507421

接口文档

接口的说明文档, 调用接口的依据, 包含 接口URL 参数 输出内容 说明, 参照接口文档知道接口的作用, 以及接口如何调用

接口文档示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zXxrRHK3-1690277828418)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230725105543331.png)]

+++

表单

在网页中采集数据, HTML中的 标签, 用于采集用户输入信息, 通过 标签提交操作, 把采集信息提交到服务器端处理

表单组成:表单标签,

表单域 , 包含文本框密码框多行文本框 复选框 单选框 下拉框 文件上传框

表单按钮

form

image-20230725114934550

+++

action, 规定提交表单向何处发送表单数据

action 属性的值是后端提供一个 URL地址 , 这个URL地址负责接收表单提交过来的数据

当 表单在未指定action属性下, action默认值是当前URL地址

提交表单后, 页面会跳转到action属性制定的URL地址

target , 规定在何处打开 action 的 URL

_blank 新窗口 _self (默认) 当前窗口

+++

method, 用get 还是 post 把表单数据提交给 action URL
默认 get

+++

get ? post ?

get 适合提交少量简单数据

post(常用) 适合提交大量复杂数据, 或者文件上传

++++

enctype, 发送表单数据之前对数据进行编码

image-20230725115653328

++++

表单同步提交

问题

1 页面发生跳转, 2 页面之前状态和数据丢失

解决方案: 表单只负责采集数据, Ajax负责将数据提交到服务器

通过Ajax 提交表单数据

监听表单提交事件

image-20230725142346746

获取表单数据 serialize() 方法

<body><form action="/login" id="f1"><input type="text" name="user_name"><input type="password" name="password"><button type="submit">提交</button>
</form><script>$(function () {$('#f1').submit(function (e) {e.preventDefault()console.log($(this).serialize());})})
</script>
</body>

数据交换格式

服务器端和客户端之间进行数据传输和交换的格式

XML 和 JSON(重点)

xml 太臃肿了, 浏览器解析困难, 有了 JSON

JSON

JavaScript 对象和数组的字符串表示法, 本质是字符串

专门用于存储和传输数据

两种结构

1 对象结构, JSON 中表示为 {} 括起来的内容, key:value 键值对形式, key必须双引号包括起来, value数据类型 [数字, 字符串, 布尔值, null, 数组, 对象]

image-20230725145105128

+++

2 数组结构, 在json中表示 [] 括起来的内容, 数据结构 ['", “”, “”, “”]

数组数据类型可以是 数字 字符串 布尔值 null 数组 对象

image-20230725145251541

JSON 语法注意事项

image-20230725145850571

+++

JSON 和 JS 对象 的 关系

JSON 字符串转换 JS 对象

// JSON  ->  JS对象
let obj = JSON.parse('{"a": "Hello", "b": "Hi"}');
console.log(obj);  //{ a: 'Hello', b: 'Hi' }
// JS对象  ->  JSON
let json = JSON.stringify(obj);
console.log(json);  // {"a":"Hello","b":"Hi"}

jQuery 实现上传文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/jquery.js"></script>
</head><body><input type="file" id="file1" />
<button id="btnUpload">上传文件</button><br />
<img src="./images/loading.gif" alt="" style="display: none;" id="loading" /><script>$(function () {// 监听到Ajax请求被发起了$(document).ajaxStart(function () {$('#loading').show()})// 监听到 Ajax 完成的事件$(document).ajaxStop(function () {$('#loading').hide()})$('#btnUpload').on('click', function () {var files = $('#file1')[0].filesif (files.length <= 0) {return alert('请选择文件后再上传！')}var fd = new FormData()fd.append('avatar', files[0])// 发起 jQuery 的 Ajax 请求，上传文件$.ajax({method: 'POST',url: 'http://www.liulongbin.top:3006/api/upload/avatar',data: fd,processData: false,contentType: false,success: function (res) {console.log(res)}})})})
</script></body></html>

+++

axios

专注于网络数据请求的库 简单易用

axios 发起 GET 请求

axios.get(‘url’, {/参数/}).then(callback)

<body><button id="btn" class="btn btn-success">发起get请求</button><script>document.querySelector('#btn').addEventListener('click', function (res) {let url = 'https://ajax-base-api-t.itheima.net/api/get';let paramsObj = {name: 'zs', age: 20}axios.get(url, {params: paramsObj}).then(function (res) {console.log(res.data);})})</script>
</body>

axios 发送 POST 请求

axios.post(‘url’, {/参数/}).then(callback)

document.querySelector('#btn2').addEventListener('click', function () {let url = 'https://ajax-base-api-t.itheima.net/api/post'let dataObj = {address:'北京', location:'顺议区'}axios.post(url, {params: dataObj}).then(function (res) {console.log(res.data);})})

axios 发送原生请求

image-20230725162521926

document.querySelector('#btn3').addEventListener('click', function () {let dataObj = {address:'北京', location:'顺议区'}axios({method: 'get',url: 'https://ajax-base-api-t.itheima.net/api/get',data: {}, // POST参数params: {dataObj}  //get参数}).then(function (res) {console.log(res.data);})})

节流

减少某些事件触发频率

1 鼠标连续点击, 单位时间只触发一次

2 懒加载监听滚动条位置

使用节流阀优化代码: 选择性执行一部分事件

image-20230725165935077

Http请求消息

请求行: 请求方式, URL , HTTP协议版本

image-20230725170315615

+++

请求头; 客户端基本信息

User-Agent 当前浏览器类型

Content-Type 发送到服务器数据格式

Accept 客户端接收返回内容

Accept-Lauguage 客户端接收文本内容

+++

图片第一行是请求行

image-20230725170803443

+++

请求体

通过POST 提交到服务器的数据, GET请求没有请求体

image-20230725171830884

image-20230725171012140

+++

Http 响应消息(报文)

状态行

协议版本 状态码 状态码描述

image-20230725171407315

响应头部

image-20230725171603470

响应体

服务器响应给客户端的内容

image-20230725171753757

image-20230725171843491

Http 请求方法

属于 Http 协议一部分, 对服务器资源进行的操作

image-20230725171941708

Http 响应状态码

image-20230725172054757

+++

image-20230725172154481

image-20230725172205277

image-20230725172218384

image-20230725172230890

Git ignore 目录 示例

image-20230725172512488

请求方法

属于 Http 协议一部分, 对服务器资源进行的操作

[外链图片转存中…(img-mAXofpyn-1690277828429)]

Http 响应状态码

[外链图片转存中…(img-fN6iY6x5-1690277828429)]

+++

[外链图片转存中…(img-jNppU92O-1690277828430)]

[外链图片转存中…(img-n2Z3J0mb-1690277828430)]

[外链图片转存中…(img-Kd8XgW0u-1690277828430)]

[外链图片转存中…(img-KL1VE5SK-1690277828431)]

Git ignore 目录 示例

[外链图片转存中…(img-E54loKSF-1690277828432)]

相关文章：

Ajax 黑马学习

Ajax 资源 数据是服务器对外提供的资源,通过 请求 - 处理 - 响应方式获取 请求服务器数据, 用到 XMLHttpRequest 对象 XMLHttpRequest 是浏览器提供的js成员, 通过它可以请求服务器上的数据资源 let xmlHttpRequest new XMLHttpRequest(); 请求方式 : get向服务器获取数据…...

编程日记 2023/7/27 9:01:33

软件应用开发的常见环境

一般来说&#xff0c;在小型项目中可能只有开发环境和生产环境&#xff1b;在中型项目中会有开发环境、staging environment、生产环境&#xff1b;在大型项目中会有开发环境、测试环境、staging environment、生产环境。 一、Dev Env / Development Environment 开发环境 开…...

编程日记 2023/7/27 9:00:32

Rust中的iter(), into_iter(), iter_mut()

在Rust中&#xff0c;iter(), into_iter(), iter_mut()都是用于在集合类型上创建迭代器的方法。这三个方法各有不同&#xff0c;下面一一进行介绍。 iter(): iter() 方法创建一个不可变的引用迭代器。当你只想读取集合中的元素&#xff0c;而不想改变它们或消耗集合时&#xff…...

编程日记 2023/7/27 8:59:30

[SQL挖掘机] - 日期函数 - current_date

current_date函数时&#xff0c;它通常被用来获取当前的日期。它返回一个表示当前日期的日期值。 current_date函数没有任何参数&#xff0c;因此只需简单地调用它即可获得系统当前日期。 以下是一个示例&#xff1a; select current_date;这将返回当前日期&#xff0c;例如…...

编程日记 2023/7/27 8:58:29

JAVA面试总结-Redis篇章(三)——缓存雪崩

JAVA面试总结-Redis篇章&#xff08;三&#xff09;——缓存雪崩...

编程日记 2023/7/27 8:57:28

maven编译报错

参考链接&#xff1a;mvn打包No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK_51CTO博客_mvn打包命令 在执行 yum install -y java-1.8.0-opensdk命令后&#xff0c;使用maven去编译打包&#xff0c;结果报错&#xff0c; …...

编程日记 2023/7/27 8:56:27

HPC集群调度系统和计算系统

什么是计算云&#xff1f; 所谓的计算云指的是为计算业务优化的类云基础架构&#xff0c;它强调用云的方式解决计算问题&#xff0c;而不是将“计算”搬到现有的公有云或者容器云上。 目前公有云或者容器云&#xff08;例如k8s&#xff09;上的HPC解决方案本质上都是将现有的H…...

编程日记 2023/7/27 8:55:24

pg_archivecleanup清理wal日志

一、 注意事项 pg_archivecleanup代码中仅进行了wal日志文件名的对比&#xff0c;没有实现对WAL日志名及对应生成时间的判断。在WAL日志未被重命名时&#xff0c;时间与日志名顺序名一致&#xff0c;没有问题。一旦WAL日志被重命名&#xff0c;pg_archivecleanup清理就可能清理…...

编程日记 2023/7/27 8:54:23

继承中的访问级别

值得思考的问题 子类是否可以直接访问父类的私有成员&#xff1f; 思考过程 继承中的访问级别 面向对象中的访问级别不止是 public 和 private 可以定义 protected 访问级别 关键字 protected 的意义 修饰的成员不能被外界直接访问修饰的成员可以被子类直接访问 思考 为什…...

编程日记 2023/7/27 8:53:22

（学习日记）2023.06.09

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…...

编程日记 2023/7/27 8:52:21

激光雷达-相机联合标定

https://f.daixianiu.cn/csdn/9499401684344864.html ros usb相机内参标定 ROS系统-摄像头标定camera calibration_berry丶的博客-CSDN博客...

编程日记 2023/7/27 8:51:20

[golang gin框架] 40.Gin商城项目-微服务实战之Captcha验证码微服务

本次内容需要 gin框架基础知识, golang微服务基础知识才能更好理解 一.Captcha验证码功能引入 在前面,讲解了微服务的架构等,这里,来讲解前面商城项目的 Captcha验证码 微服务 ,captcha验证码功能在前台,后端 都要用到 ,可以把它 抽离出来 ,做成微服务功能 编辑 这个验证码功能…...

编程日记 2023/7/27 8:50:19

【LeetCode热题100】打卡第44天：倒数第30~25题

文章目录 【LeetCode热题100】打卡第44天&#xff1a;倒数第30~25题⛅前言 移动零&#x1f512;题目&#x1f511;题解 寻找重复数&#x1f512;题目&#x1f511;题解 二叉树的序列化与反序列化&#x1f512;题目&#x1f511;题解 最长递增子序列&#x1f512;题目&#x1f5…...

编程日记 2023/7/27 8:49:17

C# 匿名方法和Lambda表达式

一.匿名方法 1.匿名方法的演变 匿名方法是为了简化委托的实现&#xff0c;方便调用委托方法而出现的&#xff0c;同时&#xff0c;匿名方法也是学好lambda表达式的基础。在委托调用的方法中&#xff0c;如果方法只被调用一次&#xff0c;这个时候我们就没有必要创建具名方法&…...

编程日记 2023/7/27 8:48:16

uniapp微信小程序scroll-view滚动scrollLeft不准确

今天在实现微信小程序的一个横向导航的时候出现了一个问题&#xff0c;就是每次滑到滚动条最右边的时候 scrollLeft的值都不准确 原因&#xff1a;因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流&#xff0c;可以在scroll-view 加一个 throttle“{{false}}” 关闭…...

编程日记 2023/7/27 8:47:14

symfony/console

github地址&#xff1a;GitHub - symfony/console: Eases the creation of beautiful and testable command line interfaces 文档地址&#xff1a;The Console Component (Symfony 5.4 Docs) 默认命令list&#xff0c;可以用register注册一个command命令&#xff0c;之后可以…...

编程日记 2023/7/27 8:46:13

OSI模型简介及socket，tcp，http三者之间的区别和原理

1.OSI模型简介&#xff08;七层网络模型&#xff09; OSI 模型(Open System Interconnection model)&#xff1a;一个由国际标准化组织提出的概念模型&#xff0c;试图提供一个使各种不同的计算机和网络在世界范围内实现互联的标准框架。 它将计算机网络体系结构划分为七层,每…...

编程日记 2023/7/27 8:45:12

【leetcode】leetcode69 x的平方根

文章目录 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。原理牛顿法&#xff08;数值分析中使用到的&#xff09;:二分法 解决方案java 实现实例执行结果 python 实现实例 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&…...

编程日记 2023/7/27 8:44:11

springboot与rabbitmq的整合【演示5种基本交换机】

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;后端专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…...

编程日记 2023/7/27 8:43:10

【设计模式】设计原则-单一职责原则

单一职责原则 类的设计原则之单一职责原则&#xff0c;是最常用的类的设计的原则之一。 百度百科&#xff1a;就一个类而言&#xff0c;应该仅有一个引起它变化的原因。应该只有一个职责。 通俗的讲就是&#xff1a;一个类只做一件事 这个解释更通俗易懂&#xff0c;也更符…...

编程日记 2023/7/27 8:42:09

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2026/1/25 4:36:37

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/31 13:18:31

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2026/1/27 17:00:20