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…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
React Native 导航系统实战（React Navigation）
导航系统实战（React Navigation） React Navigation 是 React Native 应用中最常用的导航库之一，它提供了多种导航模式，如堆栈导航（Stack Navigator）、标签导航（Tab Navigator）和抽屉…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
华为OD机试-食堂供餐-二分法
import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...