Ajax-AJAX请求的不同发送方式
🥔：你一定能成为想要成为的人
发送AJAX请求不同方式
- 发送AJAX请求不同方式
- 1、jQuery发送AJAX请求
- 2、axios发送AJAX请求（重点）
- 3、fetch发送AJAX请求
发送AJAX请求不同方式
1、jQuery发送AJAX请求
首先需要jquery的js文件，资源路径：jquery (v3.6.4) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
使用jQuery发送get、post、和自定义请求头：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkcrossorigin="anonymous"href="https://cdn.bootcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script></head><body><div class="container"><h2 class="page-header">jQuery发送AJAX请求</h2><button class="btn btn-primary">GET</button><button class="btn btn-danger">POST</button><button class="btn btn-info">通用型方法ajax</button></div><script>//GET请求$("button").eq(0).click(function () {$.get("http://127.0.0.1:8000/jquery-server",{//参数a: 100,b: 1000,},function (data) {//响应体console.log(data);},"json"); //返回JSON类型});//POST请求$("button").eq(1).click(function () {$.post("http://127.0.0.1:8000/jquery-server",{a: 100,b: 1000,},function (data) {//响应体console.log(data);});});//通用型方法ajax$("button").eq(2).click(function () {$.ajax({//请求类型type: "GET",//urlurl: "http://127.0.0.1:8000/jquery-server",//参数data: { a: 100, b: 200 },//响应体结果设置dataType: "json",//成功的回调success: function (data) {console.log(data);},//超时时间timeout: 2000,//失败的回调error: function () {console.log("出错了!");},//头信息设置headers: {name: "lw",password: "lww",},});});</script></body>
</html>
server.js:
//jQuery服务
app.all("/jquery-server", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应头 设置允许接收自定义请求头response.setHeader("Access-Control-Allow-Headers", "*");//设置响应const data = { name: "haha" };response.send(JSON.stringify(data));
});
2、axios发送AJAX请求（重点）
首先需要jquery的js文件，资源路径：点击此处
安装axios: 脚手架目录npm i axios
先配置服务端，类型改成all，然后允许接收自定义请求头
//axios服务
app.all("/axios-server", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应头 设置允许接收自定义请求头response.setHeader("Access-Control-Allow-Headers", "*");//设置响应const data = { name: "haha" };response.send(JSON.stringify(data));
});
axios发送请求成功的值是一个封装好的响应对象：
我们想要的响应数据藏在response.data中
我们使用axios发送GET请求、POST请求和通用请求：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>axios发送AJAX请求</title><linkcrossorigin="anonymous"href="https://cdn.bootcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><scriptcrossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script></head><body><button>GET</button><button>POST</button><button>AJAX</button><script>const btns = document.querySelectorAll("button");//配置baseURLaxios.defaults.baseURL = "http://127.0.0.1:8000";//GET请求btns[0].onclick = function () {//GET请求axios.get("/axios-server", {//url参数params: {id: 100,vip: 7,},//请求头信息headers: {name: "xixi",age: 18,},}).then((value) => {console.log("全部响应结果:", value);console.log("响应状态码:", value.status);console.log("响应状态字符串:", value.statusText);console.log("响应头信息:", value.headers);console.log("响应体:", value.data);});};//POST请求btns[1].onclick = function () {axios.post("/axios-server",{//请求体username: "admin",password: "admin",},{//url参数params: {id: 200,vip: 8,},//请求头信息headers: {name: "heihei",age: 20,},});};//axios发送通用请求btns[2].onclick = function () {axios({//请求方法method: "POST",//urlurl: "axios-server",//url参数params: {id: 300,vip: 9,},//请求头信息headers: {name: "hehe",age: 21,},//请求体参数data: {username: "admin",password: "admin",},}).then((response) => {console.log("全部响应结果:", response);console.log("响应状态码:", response.status);console.log("响应状态字符串:", response.statusText);console.log("响应头信息:", response.headers);console.log("响应体:", response.data);});};</script></body>
</html>
- 注意看他们之间的区别，多去浏览器f12查看他们信息分别放在哪。
3、fetch发送AJAX请求
fetch优点：它不像jquery和axios需要引入第三方库，它直接就能用，它就在window的内置对象中，直接就能用调用fetch函数。
fetch缺点：那就是返回的数据需要包两层promise，还有就是IE不兼容fetch。
server.js:
//fetch服务
app.all("/fetch-server", (request, response) => {//设置响应头 设置允许跨域response.setHeader("Access-Control-Allow-Origin", "*");//设置响应头 设置允许接收自定义请求头response.setHeader("Access-Control-Allow-Headers", "*");//设置响应const data = { name: "haha" };response.send(JSON.stringify(data));
});
fetch发送请求：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>fetch发送AJAX请求</title></head><body><button>AJAX请求</button><script>const btn = document.querySelector("button");btn.onclick = () => {fetch("http://127.0.0.1:8000/fetch-server?a=1&b=2", {//请求方法method: "POST",//请求头headers: { name: "www" },//请求体body: {username: "www",password: "123",},}).then((response) => {return response.json(); //把json字符串转换为js对象}).then((response) => {//第二个then处理上一个返回的正确结果console.log(response);});};</script></body>
</html>
相关文章：
Ajax-AJAX请求的不同发送方式
🥔：你一定能成为想要成为的人 发送AJAX请求不同方式 发送AJAX请求不同方式1、jQuery发送AJAX请求2、axios发送AJAX请求（重点）3、fetch发送AJAX请求 发送AJAX请求不同方式 1、jQuery发送AJAX请求 首先需要jquery的js文件…...
简易图书管理系统（面向对象思想）
目录 前言 1.整体思路 2.Book包 2.1Book类 2.2BookList类 3.user包 3.1User类 3.2NormalUser类 3.3AdminUser类 4.operation 4.1IOPeration接口 4.2ExitOperation类 4.3FindOperation类 4.4ShowOperation类 4.5AddOperation类 4.6DelOperation类 4.7BorrowOpera…...
C++ 函数模板与类模板
C最重要的特性之一就是代码重用，为了实现代码重用，代码必须具有通用性。通用代码应不受数据类型的影响，并且可以自动适应数据类型的变化。这种程序设计类型称为参数化程序设计。模板是C支持参数化程序设计的工具，通过它可以实现参…...
Tailwind CSS：简洁高效的工具，提升前端开发体验
112. Tailwind CSS：简洁高效的工具，提升前端开发体验 1. 什么是Tailwind CSS？ Tailwind CSS是由Adam Wathan、Jonathan Reinink、David Hemphill和Steve Schoger等人共同创建的一种现代CSS框架。与传统的CSS框架不同，Tailwind CS…...
NR CSI(六) CSI reporting using PUCCH
之前NR CSI(二) the workflow of CSI report有对CSI report的相关流程进行介绍，而这篇主要看下CSI reporting over PUCCH的相关规定。 CSI report在PUCCH上传输的场景如上表红色字体，有三种场景，具体的对应的是Periodic 和Semi-Persistent CS…...
论文阅读---《Unsupervised Transformer-Based Anomaly Detection in ECG Signals》
题目：基于Transformer的无监督心电图（ECG）信号异常检测 摘要 异常检测是数据处理中的一个基本问题，它涉及到医疗感知数据中的不同问题。技术的进步使得收集大规模和高度变异的时间序列数据变得更加容易，然而ÿ…...
5G上行干扰规避的参数策略
LNR干扰避让 1. 干扰避让特性 D1/D2干扰避让：干扰与非干扰带宽独立测量，避免部分频带受干扰拉低整个带宽MCS，基于测量结果， 用户级自适应调度60/80/100M，躲避干扰频带。 窄带干扰避让：避免部分带宽的干扰对…...
CTF流量题解tcp1
用流量工具进行分析。发现消息长度有点异常。右键TCP跟踪。 ....mos.-mos-.-.mos-.-mos..-.mos..-mos-. 摩斯密码生成-网页工具 (adminun.com)...
Django快速入门
文章目录 一、安装1.创建虚拟环境（virtualenv和virtualenvwrapper）2. 安装django 二、改解释器三、创建一个Django项目四、项目目录项目同名文件夹/settings.py 五、测试服务器启动六、数据迁移七、创建应用八、基本视图1. 返回响应 response2. 渲染模板…...
Python “牵手” 淘宝商品详情数据获取方法，淘宝API申请指南
淘宝详情接口 API 是淘宝开放平台提供的一种 API 接口，它可以帮助开发者获取淘宝商品的详细信息，包括商品的标题、描述、图片等信息。在淘宝电商平台的开发中，淘宝详情接口 API 是非常常用的 API，因此本文将详细介绍淘宝详情接口 …...
OpenScene
paper：OpenScene: 3D Scene Understanding with Open Vocabularies code: https://github.com/pengsongyou/openscene 摘要：传统的3D场景理解方法依赖于带标签的3D数据集，在有监督的情况下为单个任务训练模型。我们提出了OpenScene，一种替代性的方法，模型预测CLIP特征空…...
HDFS中的Trash垃圾桶回收机制
Trash垃圾桶回收机制 文件系统垃圾桶背景功能概述Trash Checkpoint Trash功能开启关闭HDFS集群修改core-site.xml删除文件到trash删除文件跳过从trash中恢复文件清空trash 文件系统垃圾桶背景 回收站（垃圾桶）是windows操作系统里的一个系统文件夹&#…...
segment-anything使用说明
文章目录 一. segment-anything介绍二. 官网Demo使用说明三. 安装教程四. python调用生成掩码教程五. python调用SAM分割后转labelme数据集 一. segment-anything介绍 Segment Anything Model（SAM）根据点或框等输入提示生成高质量的对象遮罩，…...
在魔塔社区搭建通义千问-7B（Qwen-7B）流程
复制以下语句 python3 -m venv myvenvsource myvenv/bin/activatepip install modelscope pip install transformers_stream_generator pip install transformers pip install tiktoken pip install accelerate pip install bitsandbytestouch run.py vi run.py复制下面代码粘…...
Redis 加入服务列表自启动
1、下载reids windows版本，选择zip格式下载 2、解压zip，并进入路径； 3、命令提示符（cmd） 进入解压后的路径后，输入指令：redis-server --service-install redis.windows.conf； 4、如…...
MyCat管理及监控——zookeeper及MyCat-web安装
1.MyCat管理 2.MyCat-eye 3.zookeeper安装 第一步：解压 第二部： 切换目录，创建data文件夹 第三步：修改zookeeper配置文件 这样zookeeper安装及配置就完成了 4.MyCat-web安装 注意mycat-web要与zookeeper关联，…...
基于spring boot的餐饮管理系统java酒店饭店菜谱 jsp源代码mysql
本项目为前几天收费帮学妹做的一个项目，Java EE JSP项目，在工作环境中基本使用不到，但是很多学校把这个当作编程入门的项目来做，故分享出本项目供初学者参考。 一、项目描述 基于spring boot的餐饮管理系统j 系统1权限ÿ…...
JVM分析工具JProfiler介绍及安装
目录 一、什么是JProfiler？ 二、JProfiler 功能结构 1、分析代理 2、记录数据 3、快照 三、安装 一、什么是JProfiler？ JProfiler是一个专业的工具，用于分析运行中的JVM内部发生的事情。当您的生产系统出现问题时，您可以…...
Nginx使用多个.conf文件配置虚拟主机server
使用 Nginx 配置多个虚拟机 server 服务。通常做法可以直接在 nginx.conf 文件中添加即可，如下事例： # nginx.confworker_processes 1;events {worker_connections 1024; }http {include mime.types;default_type application/octet-stream…...
nginx编译以及通过自定义生成证书配置https
1. 环境准备 1.1 软件安装 nginx安装编译安装以及配置https，需要gcc-c pcre-devel openssl openssl-devel软件。因此需要先安装相关软件。 yum -y install gcc-c pcre-devel openssl openssl-devel wgetopenssl/openssl-devel：主要用于nginx编译的htt…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
day52 ResNet18 CBAM
在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
C++：多态机制详解
目录 一. 多态的概念 1.静态多态（编译时多态） 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1）.协变 2）.析构函数的重写 5.override 和 final关键字 1&#…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&：逻辑与 ||：逻辑或 ！：逻辑非 短路求值 位运算符 按位与&： 按位或 | 按位取反~ …...
:LeetCode 142. 环形链表 II（Linked List Cycle II）详解)
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解
文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...
归并排序：分治思想的高效排序
目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法，由约翰冯诺伊曼在1945年提出。其核心思想包括： 分割(Divide)：将待排序数组递归地分成两个子…...