如何通过Ajax将JSON数据传递至Python后端并接收

首先看你的代码里有几个关键问题导致后端拿不到数据，我帮你一步步梳理：

前端代码的两处核心错误 #

1. Content-Type 拼写错误：你写的是 'Content-Type': 'aplication/json'，正确拼写是 application/json（少了一个字母p），这个错误会让后端无法识别请求的内容类型，自然无法解析JSON数据。
2. Fetch 的 Body 未序列化：fetch 的 body 参数如果直接传入普通JS对象，浏览器不会自动把它转换成JSON字符串，必须手动用 JSON.stringify() 做序列化处理。

修正后的前端代码：

<form>
  <input type="text" id="email" name="email"/>
  <input type="text" name="password" id="pass"/>
  <span id="btn">send</span>
</form>
<script>
function log() {
  var email, pass;
  email = document.getElementById('email').value;
  pass = document.getElementById('pass').value;
  fetch('http://localhost:5000/login', {
    // 用JSON.stringify把对象转成JSON字符串
    body: JSON.stringify({ email: email, password: pass }),
    headers: {
      'Accept': 'application/json, text/plain, */*',
      // 修正Content-Type的拼写错误
      'Content-Type': 'application/json'
    },
    method: 'post'
  })
  .then(response => response.json())
  .catch(err => { throw err })
  .then(response => {
    console.log(response);
  })
}
var btn = document.getElementById('btn');
btn.addEventListener('click', log);
</script>

后端代码的优化建议 #

你的后端代码框架没问题，但可以做一点小优化，提升容错性：

• 如果前端修正后还是拿不到数据，可以给 request.get_json() 加上 force=True 参数，强制解析JSON（即使请求头的Content-Type有微小偏差也能生效）。
• Flask 自带的 jsonify 方法比 json.dumps() 更适合返回JSON响应，它会自动设置正确的Content-Type响应头。

修正后的后端代码：

from flask import Flask, request, jsonify

@app.route('/login', methods=['POST'])
def login():
    # 加上force=True确保稳定解析JSON
    data = request.get_json(force=True)
    print(data)  # 现在应该能拿到{email: "...", password: "..."}格式的数据了
    return jsonify({"success": True})

验证步骤 #

1. 启动Flask服务，确保端口是5000；
2. 在前端输入邮箱和密码，点击send按钮；
3. 查看Flask控制台的输出，就能看到你发送的邮箱和密码数据了。

如果还是有问题，可以打开浏览器开发者工具的「Network」标签，检查请求的Payload是否正确，以及请求头的Content-Type是否为application/json。

内容的提问来源于stack exchange，提问作者Kubatekk