ajax|对象传递 ajax如何将对象发送到前台及后端接收方式解析

🔥 AJAX对象传递全攻略：前后端数据交互的魔法技巧

场景引入：
小明正在开发一个电商网站🛒，需要把用户勾选的商品列表（包含价格、数量等对象数据）实时传给后端计算总价，他抓耳挠腮："用AJAX怎么传对象啊？后端又该怎么接？" 别急！这篇指南就是你的"传送门"🚪！

前端：对象如何变成AJAX的"行李"🎒

方法1：JSON.stringify 大法

const order = {
  items: [
    { id: 101, qty: 2 },
    { id: 205, qty: 1 }
  ],
  coupon: "FESTIVAL2025"
};
// 🚀 关键步骤：对象转JSON字符串
fetch('/api/checkout', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'  // 必须声明！
  },
  body: JSON.stringify(order)  // 魔法发生在这里！
});

方法2：FormData 花式打包（适合含文件时📁）

const formData = new FormData();
formData.append('user', JSON.stringify({
  name: "小明",
  level: "VIP"
}));
// 传统xhr方式演示
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/profile');
xhr.send(formData);  // 无需手动设置Content-Type！

后端：如何拆解这个"快递包裹"📦

🌟 Spring Boot接收示范（Java）

@PostMapping("/checkout")
public ResponseEntity checkout(@RequestBody OrderDTO order) {
    // 自动反序列化JSON → 对象
    System.out.println(order.getItems().get(0).getId()); 
    return ResponseEntity.ok("结算成功！");
}

🐍 Flask接收示范（Python）

from flask import request, jsonify
@app.route('/api/checkout', methods=['POST'])
def checkout():
    data = request.get_json()  # 自动解析JSON
    print(data['coupon'])
    return jsonify({"status": "ok"})

💡 注意事项

1. Content-Type必须匹配：

   • application/json → 后端用@RequestBody或request.get_json()
   • multipart/form-data → 用FormData或普通表单处理

2. 日期对象要特殊处理📅：

   

   // 前端处理日期
   order.date = new Date().toISOString(); 

常见翻车现场🚑（及急救方案）

问题1：后端收到null

✅ 检查：

• 前端是否漏了JSON.stringify
• 请求头是否设置Content-Type: application/json

问题2：跨域报错（CORS）

✅ 解决方案：

// Spring Boot后端配置示例
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedMethods("*");
    }
}

进阶技巧：二进制文件+对象混合传递🎨

// 上传头像+用户信息
const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('meta', JSON.stringify({
  userId: 123,
  description: "夏日新头像~"
}));
// 发送混合数据
axios.post('/api/upload', formData);

2025年最新实践：现在主流框架（React/Vue等）基本都内置了AJAX封装工具，但底层原理仍是相通的✨，记住这个核心公式：

对象 → JSON字符串 → 网络传输 → 后端解析 → 新生对象

下次再遇到对象传递需求,你就是团队里的"AJAX魔法师"🧙‍♂️啦！