如何使用AJAX向Rails控制器发送JavaScript值？

在我的应用程序的

仪表板

页面中，我希望显示一个地图图例，该图例根据显示该图例的HTML的给定值动态填充

这就是传说的样子：

我正在用javascript填充这个传奇；My JavaSCript函数返回一个嵌套哈希数组，该数组如下所示：

[
   {title: 'Downtown Loft', color:'#ade8ad'},
   {title: 'Midtown Mansion', color:'#bd95ff'}
]

问题 为了实现这一点，我需要能够将上面的数组从我的

pages.js.erb

文件发送到我的

pages\u controller.rb

文件，特别是发送到

仪表板

操作。在这个控制器方法中，我将把JavaScript中的数据分配给名为

@calendar\u legend

为了验证这一点，我将在我的

dashboard.html.erb

视图中调用

，并期望它显示数组。。。不幸的是，这不起作用

我在我的控制器中尝试了

render json:@calendar\u legend

，在查看该页面时总是得到

null

值

以下是我尝试将数据发送到控制器的方式：

function calendarLegend(){
  const legendarray = [
    {title: 'Downtown Loft', color:'#ade8ad'}, 
    {title: 'Midtown Mansion', color:'#bd95ff'}
  ]

  $.ajax({
      type:'POST',
      url: 'pages/dashboard',
      data: JSON.stringify(legendarray),
      contentType: 'application/json'
  });
};

$(document).ready(function(){
  calendarLegend();
});

下面是我如何在控制器中分配它的

def dashboard
   @calendar_legend = params[:legendarray]
   render json: @calendar_legend
end 

在我看来

<%= @calendar_legend %>

---

这与我在Stackoverflow和其他各种网站上找到的任何其他解决方案都不起作用。

问题是您正在呈现尚未设置的变量@calendar\u图例。此外，Ajax函数在调用结果后不会在页面上呈现结果

我不太确定你在这里想要完成什么，但这里有一些建议

首先，您可以在加载dashboard.html.erb页面的控制器操作中设置@calendar\u legend变量（而不是在使用Ajax加载页面后调用另一个操作）。如果这样做，就可以完全删除Ajax函数

第二，如果设置在页面加载后尝试加载数据以更改图例，则需要处理来自服务器的响应。我可以想出两种方法轻松做到这一点：

将响应处理程序添加到AJAX方法中（来自jQuery AJAX文档的示例-）-在本例中，.done函数中的“data”变量将包含@calendar\u legend的值，您正在从控制器操作中将其呈现为json，因此您需要将其添加到页面：

$.ajax({
  type: 'POST',
  url: "pages/dashboard",
  data: JSON.stringify(legendarray),
  contentType: 'application/json'
}).done(function(data) {
  $('.div-with-calendar-legend-data-inside').html( data );
});

您还可以使用与控制器操作同名的js.erb模板（而不是将响应处理程序添加到Ajax函数）对Rails执行此操作。首先，您需要修改控制器操作，只设置变量而不呈现任何内容（而是让Rails呈现js.erb模板）：

然后创建模板app/views/pages/dashboard.js.erb，并向其中添加如下内容：

$('.div-with-calendar-legend-data-inside').html( <%= @calendar_legend %> );

$（'.div，其中包含日历图例数据'）.html（）；

这两个选项都要求您在视图中添加一个div（带有类或ID），以便将@calendar\u图例数据添加到：

    <div class="div-with-calendar-legend-data-inside">
      <%= @calendar_legend %>
    </div>

通常，我只会尝试使用Ajax加载数据，如果用户在页面上进行更改时尝试重新加载图例（即，他们从下拉列表或其他表单输入中选择内容），那么您可以使用Ajax将数据发送到控制器，让它更新图例而不刷新页面。但是，在这样做时，我只需要使用一个form_标记并在其上设置remote:true，然后在输入发生变化时使用jquery提交表单，并使用js.erb模板处理响应——我认为这比使用Ajax函数更干净

---

希望这能有所帮助

感谢您的回复。。。明确地说，我不希望/更喜欢用AJAX实现这一点，我理解AJAX的主要目的是在不刷新的情况下实时更新客户端，这不是我的意图。我只尝试了AJAX，因为它允许JS与Rails对话。虽然您的解决方案可能会起作用，但我认为它并不适合我的用例。如果您能详细说明您的回答的这一部分，那就太好了：“首先，您可以在控制器操作中设置@calendar\u legend变量……”我刚刚意识到我可能完全可以用RubyI来完成这一操作，只使用ruby解决了这个问题。出于不重要的原因，我试图用javascript生成这个数组，这是完全不必要的。我加上这条评论是因为我觉得这不是一个好问题，但给出的答案非常有用！

    <div class="div-with-calendar-legend-data-inside">
      <%= @calendar_legend %>
    </div>