javascript - 单击按钮通过 Ajax 请求将 Javascript 数组发送到 Rails Controller

Question

提前感谢您的帮助，这个问题困扰了我几天。

我的 Rails 应用程序中有一个 View ，它会随机显示西类牙语中的一个单词，同时用英语呈现相同的单词。示例:

狗

操作

用户能够来回切换西类牙语单词的字母以“创建”正确的单词，在上面的示例中为“perro”。然后，用户单击按钮提交答案，我的 JavaScript 会正确提醒数组“perro”或用户生成的任何内容。我的目标是在用户单击下一个按钮后将此 javascript 数组(下面代码中的 sortedID)传递回我的 Rails 'lang' Controller 。下面的 ajax 代码似乎没有执行此操作，因为当我尝试使用下面的单行代码访问 Controller 中的数组时，我收到一个 nil 错误:

data = params[:order].split(',')

我的 JavaScript 代码如下所示:

$(function() {

    $(" #sortable ").sortable({axis: "x", containment: "window"});
    $( ".clicked" ).click( function() {

       var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
       alert(sortedIDs);

   var target = "http://localhost:3000/langs";

       $.ajax({
         type: 'get',
         url: target + '?order='+sortedIDs.join(',') ,
         dataType: 'script'
       }); 
    });      });

我的索引 View 如下所示:

<% provide(:title, 'Quiz') %>
<%= javascript_include_tag 'scramble' %>

<div class="center jumbotron" style="width: 100%; margin-left: auto; margin-right: auto;">


  <% if @randomNumber == 0 %>  
    <h2> Word Scramble </h2>


    <div class="well" style="background-color: #D8D8D8; width: 50%; margin-left: auto; margin-right: auto;">
      <%= @spanishNotScrambled %>
    </div>


    <div class="panel panel-default" style="background-color: #CEECF5; width: 100%; margin-left: auto; margin-right: auto;">
      <div class="panel-body">


       <ul id="sortable">

        <% @wordScramble.each do |letter| %>
          <li class="ui-state-default" custom-cl="<%= letter %>" ><%= letter %></li>
        <% end %> 
      </ul>

    </div>
   </div>
  <% end %>

  <% if @randomNumber == 1 %>  
    <h2> Some other exercise </h2>
    <%= @test %>
  <% end %>

  <% if @index != 9 %>
    <ul class="pager">
      <div class="clicked"><%= link_to "Next", langs_path(:option => 'next2')%></div>
    </ul>
  <% else %>
    <ul class="pager">
      <div class="clicked"><%= link_to "Score Quiz!", langs_path(:option => 'scorequiz')%></div>
    </ul>
  <% end %>

</div>

编辑添加 jsfiddle 示例:

jsfiddle example

编辑2添加 Controller 代码:

class LangsController < ApplicationController
  before_filter :signed_in_user, only:[:index, :show]

  def index
    @quiz = Lang.limit(10).offset(current_user.bookmark - 11)
    @index = current_user.bookmark2
    @randomNumber = rand(1)
    which_button_clicked2
    exercise_bank
    data = params[:order].split(',')
  end

  private
    def signed_in_user
      redirect_to user_session_path, notice: "Please sign in." unless user_signed_in?
    end

    def which_button_clicked2
      if params[:option] == "next2"
        @index = @index + 1
        current_user.bookmark2 = @index
        current_user.save
      end

      if params[:option] == "scorequiz"
        @index = 0
        current_user.bookmark2 = @index
        current_user.save
        #redirect to page where show quiz results
      end
    end

    def exercise_bank
      if @randomNumber == 0 #execute word scramble exercise
         @spanishNotScrambled = @quiz[@index].english_to_spanish
         @wordScramble = @quiz[@index].english.split('').shuffle

      end

      if @randomNumber == 1 #execute some other exercise
        @test = "Exercise 2"
      end

    end  
end

Answer 1

@mtcrts70 - 这就是我通常使用 ajax 请求将数据传递到 Controller 的方式。

$.ajax({

  type: 'GET',
  url: target,
  dataType: 'script,
  data: {order: sortedIDs}

});

在 Controller 中，您将在 params[:order] 中获取它