前端XMLHttpRequest get请求能不能在body中传参数?

ops/2024/12/23 4:21:32/

文档

查看mdn文档,文档XMLHttpRequest.send()有提到:

XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null

测试

一个简单的nodejs服务器

var http = require('http')
var server = http.createServer()
server.on('request', function (request, response) {console.log('收到客户端的请求了,请求路径是:' + request.url)response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");response.write('hello')response.write(' nodejs')response.end()
})server.listen(3000, function () {console.log('服务器启动成功了,可以通过 http://127.0.0.1:3000/ 来进行访问')
})

一个简单的前端页面

<!DOCTYPE html>
<html lang="en">
<body></body><script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js "></script><script>// 方法1,使用原生的XMLHttpRequest,get请求,send传数据var xhr = new XMLHttpRequest();xhr.open('GET', 'http://127.0.0.1:3000/method1', true);xhr.send('{a:1}');xhr.onload = function () {console.log('123')};// 方法2,使用ajax的方式传数据$.ajax({url: "http://127.0.0.1:3000/method2",method:'get',data: {a:1}}).done(function() {$(this).addClass("done");});</script>
</html>

截图:
方法1:

明显没有入参{a:1}

方法2:

自动拼接到url中(从ajax文档也看出ajax会自动将get请求的参数带入到url中)

结论

前端XMLHttpRequest get请求不能在body中传参数,只能拼接到url中传参。

使用 XMLHttpRequest 封装 AJAX 请求,并支持传递自定义头部以及使用 FormData 传递参数,可以按照以下步骤进行。我们将创建一个通用的 ajax 函数,该函数接受多种参数,包括请求方法、URL、头部信息、请求体等。

封装 AJAX 函数
function ajax(options) {// 默认配置const defaults = {method: 'GET',url: '',headers: {},data: null,query: null,success: function(response) {},error: function(error) {}};// 合并用户提供的配置options = { ...defaults, ...options };// 创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest();// 构建完整的 URLlet url = options.url;if (options.query) {const queryStr = Object.keys(options.query).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(options.query[key])).join('&');url += (url.includes('?') ? '&' : '?') + queryStr;}// 设置请求方法和 URLxhr.open(options.method, url, true);// 设置请求头部for (let key in options.headers) {xhr.setRequestHeader(key, options.headers[key]);}// 处理响应xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {options.success(xhr.responseText);} else {options.error(xhr.statusText);}}};// 发送请求体if (options.data instanceof FormData) {xhr.send(options.data);} else if (options.method.toUpperCase() === 'POST' || options.method.toUpperCase() === 'PUT') {xhr.send(JSON.stringify(options.data));} else {xhr.send();}
}
使用示例
1. 发送 GET 请求,带查询参数
ajax({method: 'GET',url: 'https://api.example.com/data',headers: {'Authorization': 'Bearer your-token'},query: {param1: 'value1',param2: 'value2'},success: function(response) {console.log('GET Response:', response);},error: function(error) {console.error('GET Error:', error);}
});
2. 发送 POST 请求,传递 JSON 数据
ajax({method: 'POST',url: 'https://api.example.com/data',headers: {'Content-Type': 'application/json','Authorization': 'Bearer your-token'},data: {key1: 'value1',key2: 'value2'},success: function(response) {console.log('POST Response:', response);},error: function(error) {console.error('POST Error:', error);}
});
3. 发送 POST 请求,传递 FormData
const formData = new FormData();
formData.append('file', document.getElementById('file-input').files[0]);
formData.append('name', 'John Doe');ajax({method: 'POST',url: 'https://api.example.com/upload',headers: {'Authorization': 'Bearer your-token'},data: formData,success: function(response) {console.log('FormData POST Response:', response);},error: function(error) {console.error('FormData POST Error:', error);}
});
解释
  1. 默认配置

    • defaults 对象包含了默认的请求配置,如请求方法、URL、头部信息、数据、查询参数和回调函数。
    • 用户提供的配置会覆盖默认配置。
  2. 构建完整的 URL

    • 如果 options.query 存在,将其转换为查询字符串并附加到 url 上。
    • 使用 encodeURIComponent 对查询参数进行编码,确保特殊字符被正确处理。
  3. 设置请求方法和 URL

    • xhr.open(options.method, url, true):打开请求,true 表示异步请求。
  4. 设置请求头部

    • 使用 for 循环遍历 headers 对象,并调用 setRequestHeader 方法设置每个头部信息。
  5. 处理响应

    • onreadystatechange 事件处理程序检查 readyStatestatus,并在请求完成且状态码为 200-299 时调用 success 回调,否则调用 error 回调。
  6. 发送请求体

    • 如果是 POSTPUT 请求且数据类型为 FormData,直接发送 FormData 对象。
    • 否则,将数据转换为 JSON 字符串并发送。

通过这种方式,您可以灵活地使用 XMLHttpRequest 发送各种类型的 AJAX 请求,并支持传递自定义头部、不同形式的请求体和查询参数。


http://www.ppmy.cn/ops/144219.html

相关文章

flutter --no-color pub get 超时解决方法

新建Flutter项目后&#xff0c;运行报错&#xff0c;需要执行pub get 点击Run ‘flutter pub get’ … … … 卡着&#xff0c;不动了&#xff0c;提示超时 是因为墙的问题 解决方案&#xff1a; 添加以下环境变量 变量名: PUB_HOSTED_URL 变量值: https://pub.flutter-io.cn …

android源码下载

如果是虚拟机 切换桥接模式 1 mkdir ~/bin、PATH~/bin:$PATH 2 curl https://mirrors.tuna.tsinghua.edu.cn/git/git-repo > ~/bin/repo 3 chmod x ~/bin/repo 4 设置git 全局用户名 邮箱 5 设置缓存 git config --global http.postBuffer 5000000000 6 设置清华源&#xf…

C05S07-Tomcat服务架设

一、Tomcat 1. Tomcat概述 Tomcat也是一个Web应用程序&#xff0c;具有三大核心功能。 Java Servlet&#xff1a;Tomcat是一个Servlet容器&#xff0c;负责管理和执行Java Servlet、服务端的Java程序&#xff0c;处理客户端的HTTP请求和响应。Java Server&#xff1a;服务端…

FFmpeg 框架简介和文件解复用

文章目录 ffmpeg框架简介libavformat库libavcodec库libavdevice库 复用&#xff08;muxers&#xff09;和解复用&#xff08;demuxers&#xff09;容器格式FLVScript Tag Data结构&#xff08;脚本类型、帧类型&#xff09;Audio Tag Data结构&#xff08;音频Tag&#xff09;V…

python飞机大战游戏.py

python飞机大战游戏.py import pygame import random# 游戏窗口大小 WINDOW_WIDTH 600 WINDOW_HEIGHT 800# 颜色定义 BLACK (0, 0, 0) WHITE (255, 255, 255)# 初始化Pygame pygame.init()# 创建游戏窗口 window pygame.display.set_mode((WINDOW_WIDTH, WINDOW_HEIGHT))…

使用 Marp 将 Markdown 导出为 PPT 后不可编辑的原因说明及解决方案

Marp 是一个流行的 Markdown 演示文稿工具&#xff0c;能够将 Markdown 文件转换为 PPTX 格式。然而&#xff0c;用户在使用 Marp 导出 PPT 时&#xff0c;可能会遇到以下问题&#xff1a; 导出 PPT 不可直接编辑的原因 根据 Marp GitHub 讨论&#xff0c;Marp 导出的 PPTX 文…

Liveweb视频融合共享平台在果园农场等项目中的视频监控系统搭建方案

一、背景介绍 在我国的大江南北遍布着各种各样的果园&#xff0c;针对这些地处偏僻的果园及农场等环境&#xff0c;较为传统的安全防范方式是建立围墙&#xff0c;但是仅靠围墙仍然无法阻挡不法分子的有意入侵和破坏&#xff0c;因此为了及时发现和处理一些难以察觉的问题&…

JVM性能优化一:初识内存泄露-内存溢出-垃圾回收

本文主要是让你充分的认识到什么叫做内存泄露&#xff0c;什么叫做内存溢出&#xff0c;别再傻傻分不清了&#xff0c;别再动不动的升级服务器的内存了。 文章目录 1.基本概念1.1.内存泄露1.2.内存溢出1.3.垃圾回收1.4.内存泄露-垃圾回收-内存溢出三者的关系关系 2.代码示例2.…