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

Ajax 黑马学习

news 2026/2/9 10:27:30

Ajax

资源

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

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

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

let xmlHttpRequest = new XMLHttpRequest();

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

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

+++

jQuery 中的 Ajax

$get 函数

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

$post函数

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

$ajax 函数

$.ajax({

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

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

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

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

})

接口文档

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

接口文档示例

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

+++

表单

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

表单组成:表单标签,

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

表单按钮

form

+++

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, 发送表单数据之前对数据进行编码

++++

表单同步提交

问题

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

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

通过Ajax 提交表单数据

监听表单提交事件

获取表单数据 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, 数组, 对象]

+++

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

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

JSON 语法注意事项

+++

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 发送原生请求

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 懒加载监听滚动条位置

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

Http请求消息

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

+++

请求头; 客户端基本信息

User-Agent 当前浏览器类型

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

Accept 客户端接收返回内容

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

+++

图片第一行是请求行

+++

请求体

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

+++

Http 响应消息(报文)

状态行

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

响应头部

响应体

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

Http 请求方法

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

Http 响应状态码

+++

Git ignore 目录示例

请求方法

属于 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

软件应用开发的常见环境

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

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

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

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

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

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

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

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

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

JAVA面试总结-Redis篇章（三）——缓存雪崩...

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

maven编译报错

参考链接：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命令后，使用maven去编译打包，结果报错， …...

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

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

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

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

pg_archivecleanup清理wal日志

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

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

继承中的访问级别

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

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

（学习日记）2023.06.09

写在前面： 由于时间的不足与学习的碎片化，写博客变得有些奢侈。但是对于记录学习（忘了以后能快速复习）的渴望一天天变得强烈。既然如此不如以天为单位，以时间为顺序，仅仅将博客当做一个知识学习的目录&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天：倒数第30~25题⛅前言移动零🔒题目🔑题解寻找重复数🔒题目🔑题解二叉树的序列化与反序列化🔒题目🔑题解最长递增子序列🔒题目&#x1f5…...

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

C# 匿名方法和Lambda表达式

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

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

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

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

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

symfony/console

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

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

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

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

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

【leetcode】leetcode69 x的平方根

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

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

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

前言： 👏作者简介：我是笑霸final，一名热爱技术的在校学生。 📝个人主页：个人主页1 || 笑霸final的主页2 📕系列专栏：后端专栏 📧如果文章知识点有错误的地方，…...

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

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

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

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

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/11/19 22:56:53

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现题目链接：3576. Transform Array to All Equal Elements 1. 解题思路这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接，私钥连接和常规默认连接任务一开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务任务二修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/2/7 19:53:11

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2026/1/25 14:43:07

MMaDA: Multimodal Large Diffusion Language Models

CODE ： https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA，它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2026/2/8 4:08:40

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

Ajax

资源

jQuery 中的 Ajax

接口文档

表单

form

表单同步提交

通过Ajax 提交表单数据

数据交换格式

JSON

JSON 和 JS 对象 的 关系

jQuery 实现上传文件

axios

axios 发起 GET 请求

axios 发送 POST 请求

axios 发送原生请求

节流

Http请求消息

Http 响应消息(报文)

Http 请求方法

Http 响应状态码

Git ignore 目录 示例

Http 响应状态码

Git ignore 目录 示例

相关文章：

JSON 和 JS 对象的关系

Git ignore 目录示例

Git ignore 目录示例