我使用的是rails 5.2,我希望有一个国家和城市选择表格。我使用城邦宝石来下载包含所有国家和城市的下拉菜单,但是,城市下拉列表需要事先了解所选择的国家/地区。
我认为最好使用ajax在其下拉列表中使用输入eventlistener传递所选国家/地区。
我的问题是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的指南。 请帮忙。谢谢
答案 0 :(得分:2)
在搜索到处后找到此链接上的解决方案: 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版本。
答案 1 :(得分:1)
对您的数据使用JSON.stringify()
:
data: JSON.stringify({'country': country}),
您当前正在通过调用而不是JSON传递Object,这导致了问题。我很确定这会为你解决问题。
你的id
param在通过URL时很好,尽管数据本身需要作为JSON字符串传递。
答案 2 :(得分:0)
我遇到了类似的问题。然后,我了解了URLSearchParams界面,所有现代浏览器都支持该界面。
Rails.ajax({
type: 'GET',
url: '/users/' + <%= params[:id] %> + '/country',
data: new URLSearchParams({'country': country}).toString(),
success: function (response) {
// ...
}
})