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

Question

在我的应用程序的dashboard页面中，我想显示一个地图图例，该图例根据提供给显示此图例的 HTML 的值动态填充。

传说应该是这样的：

我正在使用 javascript 填充这个图例； 我的 JavaSCRipt 函数返回一个嵌套哈希数组，如下所示：

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

问题

为了实现这一点，我需要能够将上面的数组从我的pages.js.erb文件发送到我的pages_controller.rb文件，特别是dashboard操作。 在这个控制器方法中，我会将 JavaScript 中的数据分配给名为@calendar_legend的实例变量

为了验证这是否有效，我将在我的dashboard.html.erb视图中调用<%= @calendar_legend %>并期望它显示数组......不幸的是这不起作用。

我试过在我的控制器中render json: @calendar_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 和其他各种网站上找到的任何其他解决方案都不起作用。

Answer 1

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

我不确定您要在这里完成什么，但这里有一些建议。

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

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

1. 将响应处理程序添加到 AJAX 方法中（来自 jQuery Ajax 文档的示例 - https://api.jquery.com/jquery.ajax/ ） - 在此示例中，.done 函数中的“数据”变量将包含值@calendar_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 ); });

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

    def dashboard @calendar_legend = params[:legendarray] end

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

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

这两个选项都需要您在视图中添加一个 div（带有类或 ID）以将 @calendar_legend 数据添加到：

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

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

希望这会有所帮助