如何在視圖頁面中使用ajax響應？

我有這個作爲我的視圖頁面如何在視圖頁面中使用ajax響應？

<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(<%[email protected]_name_list%>") 
})

所有我想要的是使用從阿賈克斯通過這個列表（@student_name_list）稱爲action（submit_form）在ajax請求成功返回後在我的查看頁面中用於select選項框。

來源

2013-06-27 Hussain Akhtar Wahid ' Ghouri'

我知道Abhi不久前回答了這個問題，但是我發現他們寫的東西很有用（我已經把它寫成'thank you'了。代碼中有一些錯誤，所以我想我會更新。將工作（因爲它已經在我的項目）的一個版本希望這將有助於有人在未來：

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

來源

2013-11-08 16:09:59 H2ONOCK

假設你正在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（「你的結果格式」）將有助於用你指定的數據刷新元素。

來源

2013-06-27 07:46:29 pixelbyaj

所以這意味着我將利用這一點，並不會使用：遠程形式，它所以??我會用簡單的形式嗎？ –

我這麼認爲。你可以用簡單的表格看看這個CodeProject的鏈接（http://www.codeproject.com/Tips/289820/Post-a-form-using -Ajax-INSTEAD-OF-正常-郵報） – pixelbyaj

從format.js中刪除render :json => @student_name_list，看看你是什麼。

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

來源

2013-06-28 15:12:26

如何在視圖頁面中使用ajax響應？

回答

相關問題