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

Ajax 黑马学习

news 2025/7/19 6:19:48

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/7/17 9:57:06

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/6/17 7:22:49

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/7/19 5:26:31

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/6/17 4:52:56

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/7/18 19:56:52

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/7/13 0:42:06

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/7/18 5:48:12

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/7/13 9:30:36

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/7/17 11:00:01

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/7/17 2:46:20