如何在您的视图页面中使用 ajax 响应？答案

【问题标题】：how to use ajax response back in your view page?如何在您的视图页面中使用 ajax 响应？
【发布时间】：2013-06-27 07:04:56
【问题描述】：

我有这个作为我的视图页面

<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

现在我的问题是，我如何在相关 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%>")
})

我只想使用这个从 ajax 传递的列表 (@student_name_list)，称为 action(submit_form)，以便在 ajax 请求成功返回后用于我的视图页面中的选择选项框。

【问题讨论】：

标签： jquery ajax ruby-on-rails-3 ruby-on-rails-3.1 ruby-on-rails-3.2

【解决方案1】：

我知道 Abhi 不久前回答了这个问题，但我发现他们写的内容很有用（我已投票表示“谢谢”。代码中有一些错误，所以我想我会更新可以工作的版本（就像在我的项目中一样）。希望这对将来的某人有所帮助：

$('.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】：

假设你正在获取 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("your result format") 将有助于用您分配的数据刷新元素。

【讨论】：

所以这意味着我将使用它并且不会使用 :remote 表单，是这样吗？我会使用简单的形式吗？？
我想是的。你可以使用简单的形式查看 CodeProject 的这个链接 (codeproject.com/Tips/289820/…)

【解决方案3】：

从 format.js 中删除 render :json => @student_name_list 看看你是什么。

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

【讨论】：