js中send的作用和使用 $.ajax的作用

GET 请求(send 不带参数)

GET 请求的参数必须拼接在 URL 中,send() 里不传任何数据。

复制代码
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/users?id=123&name=John');
xhr.send();    // 无请求体

POST 请求(通过 send 传递参数)

根据后端接口要求,send() 可以传入不同格式的数据:

① 发送 URL 编码格式(表单提交)
复制代码
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/login');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
const data = 'username=admin&password=123456';
xhr.send(data);
② 发送 JSON 格式(REST API 常用)
复制代码
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/user');
xhr.setRequestHeader('Content-Type', 'application/json');
const data = JSON.stringify({ name: 'Alice', age: 25 });
xhr.send(data);
③ 发送 FormData 对象(含文件上传)
复制代码
const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('username', 'Tom');

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload');
// 不要手动设置 Content-Type,浏览器会自动加上 multipart/form-data 边界
xhr.send(formData);
④ 发送 Blob / ArrayBuffer(二进制数据)
复制代码
const blob = new Blob(['Hello World'], { type: 'text/plain' });
xhr.send(blob);

1. data 参数的基本格式

data 可以是 对象 、字符串 或 FormData:

复制代码
$.ajax({
  url: 'https://api.example.com/endpoint',
  method: 'POST',      // 或 'GET'
  data: { ... },       // 核心传参
  success: function(res) { ... }
});

2. 不同请求方法下的数据传递

GET 请求 ------ 自动拼接到 URL

当 method: 'GET' 时,data 对象会被 jQuery 自动转换为查询字符串追加到 URL 后面,不会产生请求体。

复制代码
$.ajax({
  url: 'https://api.example.com/users',
  method: 'GET',
  data: { id: 123, name: 'John' }
});
// 实际请求 URL: /users?id=123&name=John

POST / PUT / PATCH / DELETE ------ 发送请求体

默认情况下,jQuery 会将 data 对象序列化为 application/x-www-form-urlencoded 格式的字符串放在请求体中。

复制代码
$.ajax({
  url: 'https://api.example.com/user',
  method: 'POST',
  data: { name: 'Alice', age: 25 }
});
// 请求体: name=Alice&age=25
// Content-Type: application/x-www-form-urlencoded; charset=UTF-8

3. 自定义 contentType 发送不同数据格式

① 发送 JSON(REST API 常用)

需要设置 contentType: 'application/json',并将 data 手动转为 JSON 字符串

复制代码
$.ajax({
  url: 'https://api.example.com/user',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Alice', age: 25 }),
  // 或者使用 data: { ... } 配合 processData: false? 不推荐,下面会讲
});
相关推荐
deli0071 分钟前
地图定位为什么偏了 500 米?GPS 与火星坐标实测
前端
TK泰妞3 分钟前
节日促销前,TikTok 商品视频应该提前准备什么?
前端·人工智能·节日
CCIE-Yasuo15 分钟前
网络安全-学习web开发-列表、标签
前端·学习·web安全
熊猫钓鱼>_>15 分钟前
鸿蒙 PC 三方库适配复盘:libfvad 1.0 —— 把 WebRTC VAD 做成能装进采集链路的静态库
服务器·开发语言·华为·harmonyos·openharmony·适配·鸿蒙pc
小大宇19 分钟前
Vue知识点-ElementPlus-06 单选+多选+下拉+日期选择
前端·vue.js·elementui
用户114818678948421 分钟前
Nuxt 3 学习版 Demo:跟着做一遍,从跑起来到自己会改
前端
Ai-_Man27 分钟前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
raindayinrain36 分钟前
c++设计模式
开发语言·c++·设计模式
hiahiahia12344 分钟前
Streaming Model Output
开发语言·前端
paopaokaka_luck1 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts