how to use ajax response back in your view page?

问题

I have this as my view page

<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>

now when i change the content of first select box , the javascript function submits form via ajax and sends back to the controller action as mentioned in the form

in the controller action I have

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

now my question is , how can i use these @hussi and @student_name_list data in the relavant js. erb file to set the contents displayed in the view page

my submit_form.js.erb file has nothing till now

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

All I want is to use this list (@student_name_list) passed from ajax called action(submit_form) to be used in my view page for a select option box after the ajax request comes back with success .

回答1:

I know that the Abhi answered this a while ago, but I found what they wrote useful (I've upvoted as a 'thank you'. There were a few mistakes in the code so I thought I'd update with a version that will work (as it has in my project). Hopefully, this will be helpful to someone in the future:

    $('.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);
    }
});

回答2:

Suppose you are getting data in the json format:

$('.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);
    }

});

});

When you will get the data in your success call back you have to know which select/html element you need to change. so by $("#yourid").html("your result format") will help to refresh the element with your assigned data.