Question

我将此作为我的观看页面

<html>
    <head>
        <script>
            function submit_form() 
            {
                    $('#my_form').submit();
            }
        </script>
    </head>
    <body>
        <div class="container">

            <%= form_tag({:action => 'submit_form'}, :remote => true,:method=>:post,:id => 'my_form',:class => 'my_form_class') do %>
                <%= select(:grade,:id,@distinct_grade_list,{},:onchange => "submit_form()")%>
                <%= select(:period,:id,@distinct_period_list)%>
            <% end %>
            <br/>
            <div id="farzi2" style="border: 3px solid blue;margin-top: 20px">
                <%= select(:student_name,:id,{},{},{ :multiple => true, :size => 4 }) %>
            </div>
    </body>
</html>

现在当我更改第一个选择框的内容时，javascript函数通过ajax提交表单并发送回控制器操作，如表格中所述

在我有的控制器动作中

def submit_form
    puts "in submit_form action"
    @hussi = "submit_form"
    @student_name_list = Student.pluck(:student_name)


    respond_to do |format|
      format.html { redirect_to 'roles' }
      format.json { head :no_content }
      format.js   { render :json => @student_name_list }
    end
  end

现在我的问题是，如何在relavant js中使用这些@hussi和@student_name_list数据。 erb文件，用于设置视图页面中显示的内容

我的submit_form.js.erb文件到目前为止还没有任何内容

alert("in submit_form js");
$('.my_form_class').on('ajax:success', function()
{
alert(<%=@student_name_list%>")
})

我想要的就是使用这个名为action（submit_form）的ajax传递的列表（@student_name_list），在ajax请求成功返回后，在我的视图页面中使用select选项框。

Answer 1

假设您正在以json格式获取数据：

$('.my_form_class').on('submit', function()
{
     $.ajax({
    type: "POST",
    url: "/",
    data: "your_data",
    dataType: "html",
       success: function(data) {
              // response is like :   [{text:"A",value:1},{text:"B",value:2}]
             var opt="";
             $.each(data,function(ind,val){
                 option+="<option value='"+val.value+"'>"+val.text+"</option>"
             });
      $("#your_html_placeholderid").html(data);
    }

});

}）;

当您获得成功回调中的数据时，您必须知道需要更改哪个select / html元素。所以通过$（“＃yourid”）。html（“你的结果格式”）将有助于用你指定的数据刷新元素。

Answer 2

我知道Abhi不久前回答了这个问题，但是我发现他们写的内容很有用（我已经投了很多，感谢你们。＆＃39;。代码中有一些错误，所以我我想我会用一个可以工作的版本进行更新（就像在我的项目中一样）。希望这对未来的人有用：

    $('.my_form_class').on('submit', function()
    {
            $.ajax({
            type: "POST",
            url: "/",
            data: "your_data",
            dataType: "html",
            success: function(data) {
              // response is like :   [{text:"A",value:1},{text:"B",value:2}]
            var option="";
            $.each(data,function(index,value){
                option+="<option value='"+index+"'>"+value+"</option>"
           });
       $("#your_html_placeholderid").html(option);
    }
});

Answer 3

从format.js中删除render :json => @student_name_list并查看你的内容。

@student_name_list在您的js文件中自动可用。

如何在视图页面中使用ajax响应？

3 个答案: