如何在 rails-ujs Rails.ajax POST 调用（不使用 jQuery）中发送 JSON 数据？

Question

我有一个需要与 Rails API 通信的 React 客户端应用程序。我想使用rails-ujs方法 Rails.ajax。 例如：

Rails.ajax({
  type: "POST", 
  url: "/things",
  data: mydata,
  success: function(response) {...},
  error: function(response) {...}
})

看起来我无法像这样将data设置为 JSON object：

mydata = {
 thing: {
  field1: value1,
  field2: value2,
}}

我需要像这样手动将其转换为application/x-www-form-urlencoded内容类型：

mydata = 'thing[field1]=value1&thing[field2]=value2'

这对于平面数据是可以的，但对于嵌套数据来说很快就会变得复杂。

jQuery 在发出请求之前自动进行转换。

所以我想知道Rails UJS 是否有一些自动执行此操作的方法，但我在文档或代码中找不到任何内容。

Answer 1

使用Rails UJS 时，数据必须格式化为字符串表单参数。 不幸的是，不可能提供 JSON，至少目前在 Rails 6.0.2（不理想）中是不可能的。

解决方案

使用URLSearchParams将 JSON 转换为 URL 参数：

myData = {
 thing: {
  field1: value1,
  field2: value2,
}}

Rails.ajax({
  type: "POST",
  url: "/things",
  data: new URLSearchParams(myData).toString()
})

Answer 2

我多次使用ajax调用，我曾经像这样发送json数据。

var fd = new FormData();
fd.append("jsondata", JSON.stringify(mydata));

$.ajax({
  url: ...
  type :"post",
  data: fd
  success:function(){
  }
})

在 ruby​​ 控制器中解析 Json 数据很容易。 你可以只使用JSON.parse(params["jsondata"])
希望这适用于您的情况。

Answer 3

这是我使用 Content-Type 放置/发布的解决方法：application/json。

它通过在 beforeSend 回调中设置 options.data 来工作。 这样，内部 Rails.ajax.createXHR 方法不会先设置 Content-Type 标头。 https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L53

    Rails.ajax({
      url: 'http://some-url.com',
      type: 'put',
      beforeSend(xhr, options) {
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8')
        // Workaround: add options.data late to avoid Content-Type header to already being set in stone
        // https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/ajax.coffee#L53
        options.data = JSON.stringify(data)
        return true
      },
    });

Answer 4

我查看了库代码，它不支持，因为为了发送一个对象，你必须对对象进行字符串化，然后我发现库检查数据是否是字符串类型它改变了内容类型对application/x-www-form-urlencoded的请求。 此链接显示了图书馆中的情况。 为此，您解决这个问题的选择是编写一个方法，将对象转换为输入表单方式或使用 JQuery Ajax 或其他库。

Answer 5

不确定我是否误解了这个问题，但是您不能使用 JSON.stringify 转换您的对象吗？

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

当然我可以在 rails-ujs 模块中看到它使用 JSON.parse 来解析 Json 响应

Answer 6

我注意到没有针对所述问题的实际解决方案，只有解决方法。

这是一个指向将处理所需序列化的要点（JS 类）的链接：

https://gist.github.com/dansimpson/231546

Answer 7

您可以在 ajax 调用中设置内容类型并以 json 格式发送数据

var data={
      user:{
        first_name: firstname,
        last_name: lastname,
        username: username
      }}

通过将内容类型作为 json 放在 http 标头请求中来发送 ajax 调用

$.ajax({
   type: "POST",
   url: "http://someurl/post",
   data:data,
   contentType: "application/json",
   success: function(data) {
       -------
  }
});​