在参数中包括JavaScript数组

Question

用户可以单击我的页面上的元素。他们的名字通过OnClick-event填充到JavaScript数组中。我想将此数组作为我的URL中的参数传递到下一页。我如何在Ruby＆lt;％=％>？

中包含一个JavaScript数组

我读到为此使用ajax。由于我的JavaScript技能很小，我想知道我的问题是否很容易解决。

    <div class="new-content">
      <div class="newmap-cards">
        <% @companies.each do |company|%>
           <% if company.photo.present? %>
          <button class="newmap-card" value=<%=company.name%> style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)),
         url('<%= cl_image_path company.photo, height: 300, width: 400, crop: :fit %>')">
            <p><%= company.name %></p>
          </button>
        <% else %>
        <button class="newmap-card" value=<%=company.name%> >
            <p><%= company.name %></p>
          </button>
          <% end %>
        <% end %>
      </div>
      <div
      id="map"
      data-markers="<%= @markers.to_json %>">
      </div>
      <%= button_to "", new_user_registration_path, method: :get, class: "student-select-card", params: { vacancy_id: params[:vacancy_id], job_category: params[:job_category], jobs_interested: "${var n}" } %>
    </div>
<script>
  var n = [];
document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
        var val = event.target.value;
        n.push(val);
        console.log(n);      //these console.log are tests
        console.log(ret);
        document.getElementById("res").innerHTML = val;
    }
});
</script>

所以我的代码中的这一部分肯定是错误的：jobs_istested：" $ {var n}"

但是我该怎么做？

Answer 1

您可以根据业务逻辑进行以下类似的操作，当用户单击下一页收集所有检查元素时，并将其传递给AJAX请求。

$(document).on('change', 'id or class of your html element', function(evt) {
      return $.ajax('Path of your action', {
            type: 'GET',
            dataType: 'html',
            data: {
              data: pass array of values here
            },
            error: function(jqXHR, textStatus, errorThrown) {
              return console.log("AJAX Error: " + textStatus);
            },
            success: function(data, textStatus, jqXHR) {
             // your business logic
            }
          });
});

Answer 2

一种替代方法可以像这 -

chnage按钮为 -

<%= button_to "", new_user_registration_path(vacancy_id: params[:vacancy_id], job_category: params[:job_category]), method: :get, class: "student-select-card" %>

JavaScript代码 -

<script type="text/javascript">
  var n = [];
  document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
      var val = event.target.value;
      n.push(val);
      console.log(n);      //these console.log are tests
      console.log(ret);
      document.getElementById("res").innerHTML = val;
      // Get existing path of button
      var existingPath = document.getElementsByClassName("student-select-card").getAttribute("href");
      // Set new path and pass paramter jobs_interested
      document.getElementsByClassName("student-select-card").setAttribute("href", existingPath + "&jobs_interested="+n);
    }
  });
</script>

ps，我不确定您现有的COD是否已经工作，刚刚修改并添加了一种使用现有URL传递JavaScript变量的方法。希望这应该对您有所帮助。