Rails通过使用JSON的ajax请求传递params。

I'm using rails 5.2 and I would like to have a country and city selection form. I'm using the city-state gem to have dropdowns containing all the countries and cities, however, the cities dropdown needs to know the country selected beforehand.

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

I thought this would be best done using ajax to pass the selected country using an input eventlistener on its dropdown.

我认为最好使用ajax在其下拉菜单上使用输入eventlistener来传递所选国家。

My problem is that the ajax request doesn't pass the JSON variable that I'm writing but it passes {"object Object"=>nil, "id"=>"1"}.

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

This is what I have for now:

这就是我现在所拥有的:

    <%= 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>

This is what I see in console after the request:

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

   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)

Any idea what I'm doing wrong? I've tried looking everywhere but I don't see any rails 5 guides on how to use JSON in Ajax. Please help. Thanks

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

2 个解决方案

#1

Use JSON.stringify() on your data:

使用JSON.stringify()对您的数据:

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

You're currently passing an Object through the call rather than JSON, which is causing the issue. I'm pretty sure this will fix things for you.

您当前正在通过调用传递一个对象，而不是JSON，这导致了问题。我很肯定这能帮你解决问题。

Your id param is fine as it's passed through the URL, though the data itself needs to be passed as a JSON string.

虽然数据本身需要作为JSON字符串进行传递，但在通过URL时，id解析器是没问题的。

#2

Found the solution on this link after searching everywhere: https://learnetto.com/blog/how-to-make-ajax-calls-in-rails-5-1-with-or-without-jquery

在这个链接上找到的解决方案是:https://learnetto.com/blog/howto -make- ajax-calls-inrails-5-1-with- or-without-jquery

The code for the request can be written like this:

请求的代码可以这样写:

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

Except for one thing! As far as I can tell, you can’t simply send JSON data. So we need to convert mydata to application/x-www-form-urlencoded content type manually like this:

除了一件事!就我所知，您不能简单地发送JSON数据。所以我们需要像这样手工将mydata转换为application/ www-form- urlencodes内容类型:

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

When doing this I obtain the params in the correct way:

当我这样做时，我得到了正确的方法:

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

Apparently there is an automatic conversion of the data object which happened in the jquery days but is missing with the rails-ujs version.

显然，在jquery中发生了一个数据对象的自动转换，但是rails-ujs版本却没有。

#1