如何在JS的Ajax POST请求中传递变量？及400错误排查

核心问题分析 #

你的代码存在几个关键错误，直接导致了HTTP 400（错误请求）：

• 变量赋值逻辑错误：你给输入框绑定了点击事件才会赋值l_i和p_i，但点击注册按钮时，用户可能从未点击过输入框，这两个变量会是undefined，后端接收到空的用户名/密码后返回错误。
• DOM选择器拼写不一致：用户名输入框的选择器写的是#user-input（连字符），但取值时用的是#user_input（下划线），两者不匹配，永远拿不到正确的输入值。
• Cookie存储用法错误：Cookies.set(data)不符合API要求，该方法需要传入键名和对应值，不能直接传整个响应对象。

修正后的代码 #

document.getElementById("reg-btn").addEventListener("click", myFunction);
function myFunction() {
  // 直接获取输入框当前值，无需额外绑定点击事件
  const username = document.querySelector("#user-input").value;
  const password = document.querySelector("#passwordCopy").value;

  // 先校验输入是否为空，避免无效请求
  if (!username.trim() || !password.trim()) {
    alert("请填写完整的用户名和密码");
    return;
  }

  $.ajax({
    url: "http://localhost:8000/api/api-token-auth/",
    type: "POST",
    headers: { 
      "X-CSRFToken": Cookies.get('csrftoken')
    },
    data: { username: username, password: password },
    dataType: "json"
  }).done(function(data) {
    // 假设响应数据里包含token字段，按实际返回结构调整键名
    Cookies.set('auth_token', data.token);
  }).fail(function(xhr) {
    // 打印错误信息方便排查
    console.log("请求失败详情：", xhr.responseText);
  });
}

额外注意事项 #

如果后端要求接收JSON格式请求体（而非默认的表单格式），需要调整Ajax的配置：

// 修改这两行
data: JSON.stringify({ username: username, password: password }),
contentType: "application/json"

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