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

Ajax 黑马学习

news 2025/9/19 1:58:12

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/17 11:41:14

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/8/28 7:47:23

C++八股 —— 单例模式

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

编程新知 2025/7/6 22:10:07

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/9/16 9:40:57

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/9/12 15:03:05

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/9/6 22:13:40

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/9/7 8:47:45

如何配置一个sql server使得其它用户可以通过excel odbc获取数据

要让其他用户通过 Excel 使用 ODBC 连接到 SQL Server 获取数据&#xff0c;你需要完成以下配置步骤&#xff1a; ✅ 一、在 SQL Server 端配置&#xff08;服务器设置&#xff09; 1. 启用 TCP/IP 协议 打开 “SQL Server 配置管理器”。导航到&#xff1a;SQL Server 网络配…...

编程新知 2025/8/25 19:37:12