JavaScript向Rails应用传递参数异常：GET请求参数显示为[object FormData]

问题场景 #

这段JS代码看起来逻辑没问题，控制台输出正常，页面也能正确刷新，但发起GET请求时参数却变成了[object%20FormData]：

if (result) { 
  console.log(result) 
  document.getElementById('result').textContent = result.text 
  let formData = new FormData(); 
  let CodeParams = { code_data: result.text, user_id: <%= current_user.id %> }; 
  formData.append("code_json_data", JSON.stringify(CodeParams)); 
  Rails.ajax({ 
    url: "security_check", 
    type: "get", 
    data: formData 
  }); 
}

控制台能看到正确的result对象，页面的#result div也显示了result.text的内容，但请求路径却是/security_check?[object%20FormData]，完全没带上预期的参数。

问题根源 #

核心问题在于：FormData是为POST请求设计的，不能直接用在GET请求里当data参数。

FormData的作用是生成multipart/form-data格式的请求体，这是POST请求用来上传文件或复杂表单数据的标准格式。但GET请求没有请求体，它的参数是通过URL的查询字符串传递的。当你把FormData对象传给GET请求的data时，Rails.ajax底层会尝试把这个对象转成字符串，结果就得到了[object FormData]，URL编码后就变成了你看到的[object%20FormData]。

两种解决方案 #

根据你的需求选一种就行：

方案1：改成POST请求（推荐）

既然用了FormData，直接把请求类型改成POST是最顺的，完全适配FormData的使用场景：

Rails.ajax({ 
  url: "security_check", 
  type: "post", // 这里改成post
  data: formData 
});

记得同步修改后端的路由配置，把security_check的请求方式改成POST，控制器里也要对应处理POST参数。

方案2：保持GET，手动构建查询参数

如果一定要用GET请求，那不需要用FormData，直接把参数转成查询字符串就行：

if (result) { 
  console.log(result) 
  document.getElementById('result').textContent = result.text 
  let CodeParams = { code_data: result.text, user_id: <%= current_user.id %> }; 
  // 用URLSearchParams把对象转成标准查询字符串
  const queryParams = new URLSearchParams(CodeParams).toString();
  Rails.ajax({ 
    url: `security_check?${queryParams}`, // 拼到URL里
    type: "get"
  }); 
}

或者更简单，直接把CodeParams对象传给data，Rails.ajax会自动帮你转成查询字符串：

Rails.ajax({ 
  url: "security_check", 
  type: "get",
  data: CodeParams // 直接传普通JS对象
});

小提示 #

如果你的参数里包含特殊字符（比如分号、空格），URLSearchParams会自动帮你做URL编码，避免出现参数解析错误的问题，比自己手动拼接字符串靠谱多了。

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