如何在您的视图页面中使用Ajax响应? [英] how to use ajax response back in your 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>
现在，当我更改第一个选择框的内容时，javascript函数将通过ajax提交表单，并发送回表单中提到的控制器操作
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
现在我的问题是，如何在相关的js中使用这些@hussi和@student_name_list数据. erb文件来设置视图页面中显示的内容
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
我的Submit_form.js.erb文件到目前为止没有任何内容
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%>")
})
我想要做的就是在ajax请求成功返回之后，使用从ajax传递的名为action(submit_form)的列表(@student_name_list)在我的视图页面中将其用作选择选项框.
推荐答案
我知道Abhi不久前回答了这个问题，但是我发现他们写的内容很有用(我曾将其表示为谢谢".代码中有一些错误，因此我想我将使用一个可以正常工作的版本进行更新(如在我的项目中一样).希望这对将来的人会有所帮助:
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);
}
});
这篇关于如何在您的视图页面中使用Ajax响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
