【问题标题】:Rails pass params through ajax request using JSONRails 使用 JSON 通过 ajax 请求传递参数
【发布时间】:2018-06-13 11:22:49
【问题描述】:

我正在使用 rails 5.2,我想要一个国家和城市选择表。我正在使用城邦 gem 来包含所有国家和城市的下拉列表,但是,城市下拉列表需要事先知道选择的国家。

我认为最好使用 ajax 在其下拉列表中使用输入事件侦听器来传递所选国家/地区。

我的问题是 ajax 请求没有传递我正在编写的 JSON 变量,但它传递了 {"object Object"=>nil, "id"=>"1"}.

这是我现在拥有的:

    <%= form_with(model: @user) do |form| %>
    <%= form.select :country, CS.countries.values.sort, { :prompt => 'Country'} %>
    <%= form.select :city, CS.states('placeholder').keys.flat_map { |state| CS.cities(state, 'placeholder') }, { :prompt => 'City'} %>
    <%= form.submit %>
<% end %>

<script>
    var countryForm = document.getElementById('user_country');
    countryForm.addEventListener('input', function (evt) {
    var country = this.value;
    Rails.ajax({
        type: "GET",
        url: '/users/' + <%= params[:id] %> + '/country',
        dataType:'json',
        data : {'country': country},
        error: function (xhr, status, error) {
            console.log('error')
            console.error('AJAX Error: ' + status + error);
        },
        success: function (response) {
        }
    });
});
</script>

这是我在请求后在控制台中看到的:

   Started GET "/users/1/country?[object%20Object]" for 127.0.0.1 at 2018-06-13 13:19:50 +0200
Processing by UsersController#country as JSON
  Parameters: {"object Object"=>nil, "id"=>"1"}
Completed 204 No Content in 1ms (ActiveRecord: 0.0ms)

知道我做错了什么吗?我试过到处找,但我没有看到任何关于如何在 Ajax 中使用 JSON 的 rails 5 指南。 请帮忙。谢谢

【问题讨论】:

    标签: ruby-on-rails json ajax ruby-on-rails-5.2


    【解决方案1】:

    到处搜索后在此链接上找到了解决方案: https://learnetto.com/blog/how-to-make-ajax-calls-in-rails-5-1-with-or-without-jquery

    请求的代码可以这样写:

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

    除了一件事!据我所知,你不能简单地发送 JSON 数据。所以我们需要将 mydata 转换为 application/x-www-form-urlencoded 内容类型手动如下:

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

    这样做时,我以正确的方式获取参数:

     Parameters: {"thing"=>{"field1"=>"value1", "field2"=>"value2"}, "id"=>"1"}
    

    显然,在 jquery 时代发生了数据对象的自动转换,但在 rails-ujs 版本中缺少。

    【讨论】:

    • 嗯,不错的发现 - 希望很快会修补。
    【解决方案2】:

    我遇到了类似的问题。然后我了解了所有现代浏览器都支持的URLSearchParams接口。

    Rails.ajax({
      type: 'GET',
      url: '/users/' + <%= params[:id] %> + '/country',
      data: new URLSearchParams({'country': country}).toString(),
      success: function (response) {
        // ...
      }
    })
    

    【讨论】:

      【解决方案3】:

      在您的数据上使用JSON.stringify()

      data: JSON.stringify({'country': country}),
      

      您当前通过调用而不是 JSON 传递对象,这导致了问题。我很确定这会为您解决问题。

      您的 id 参数很好,因为它通过 URL 传递,但数据本身需要作为 JSON 字符串传递。

      【讨论】:

      • 您好,谢谢您的回复。我尝试这样做,但我的字符串化对象出现错误:Parameters: {"{\"country\":\"Algeria\"}"=&gt;nil, "id"=&gt;"1"} 知道为什么会这样吗?
      • 嗯,这真的很奇怪。 Rails.ajax的来源是什么?它可能是内置的,但我只是没有听说过 - 尽管如果没有,它如何传递数据可能会出现问题。
      • 据我了解 Rails.ajax 是 rails 5 不使用 jquery 进行 ajax 请求的方式。我应该在哪里寻找来源?
      • 啊——你可能是对的。我有一份新工作,我们是 Rails 4,所以还没有遇到。如果我想到任何事情会告诉你,为澄清而欢呼。
      • 无论如何,谢谢,我真的无法理解这种行为。如果我能找到解决方案,我会在这里发布