新手问题 Ajax 获取数据之后,前端不显示

miserytan · 发布于 2017年07月14日 · 最后由 miserytan 回复于 2017年07月17日 · 503 次阅读
5c8fb2

我有一个form表单,在我选择了第一个下拉列表的值之后,通过ajax获取其中的值,然后传递到controller里。

$("#app_project_software_kingdom").on("change", function () {
    var software_kingdom =$("#app_project_software_kingdom option:selected");

    var soft_select = software_kingdom.val();
    $.ajax({
        url: "new",
        data: {soft_selectid: soft_select},

        success: function(data){         
           $('#app_project_software_kingdom').val(data.software_kingdom);
        }
    });

});
if !params[:soft_selectid].blank?
    @product_ware = ProductCatalog.where(:id => params[:soft_selectid])
    @system_dom = ProductCatalog.where('parent_id =?', params[:soft_selectid] ).map{|t|[t.name,t.id]}
    debugger
    respond_to do |format|
      format.js
      format.json { render :json => { :software_kingdom => @product_ware.first.id}}
    end
end

@system_dom是我后面需要用到的第二个下拉列表的options_for_select里要用到的option。首先我在ajax的sucess里将@system_dom append到html里。

$('#system_domain').append("<% @system_dom %>");
<div id ="system_domain" class="object-select col-lg-6" >
    <%= select_tag(:system_domain, options_for_select(@system_dom,@app_project.system_domain),:include_blank => true,
        :label => l(:label_product_catalog_system_domain)) %>
</div>

但是现在遇到的问题是下拉列表不显示,可是我在控制台中能把下拉列表中的option都打出来,但是就是不显示,哪位前辈指引一下

共收到 8 条回复
De6df3
$('#system_domain').append("<%= @system_dom %>");

你已经不是第一次发帖了,下次发帖,请整理整齐你的代码,不然我就要屏蔽了!

De6df3 huacnlee 屏蔽了此话题:笔误,缺少 = 号,看我回复 07月14日 16:38
5c8fb2
De6df3huacnlee 回复

我像您说的那种改了之后,@system_dom 值能传递过去,但是下拉列表依旧显示不出来 $('#system_domain').append("<%= @system_dom %>");

B44b1b

试试这种方法
在views的你的controller同名的目录下新建一个options.js.erb和_options.html.erb
在controller里render 'options.js'

class XxxController < ApplicationController
  def hoge
    # xxxxxxxxxxxxxxxxx
    render 'options.js'
  end
end
# options.js.erb
$('#system_domain').append("<%= j render(partial: 'options', locals: { system_dom: @system_dom }) %>");
# _options.html.erb
<% system_dom.each do |dom| %>
    <option value="<%= dom.last %>"><%= dom.first %></option>
<% end %>
B44b1b

还可以试试这个,语法可能有错误,因为没跑过,大概是这个流程


class XxxController < ApplicationController
  def hoge
    # xxxxxxxxxxxxxxxxx
    @system_dom = ProductCatalog.where('parent_id =?', params[:soft_selectid] ).map{|t| { name: t.name, id: t.id} }
    render :json => { :software_kingdom => @product_ware.first.id, system_dom: @system_dom.to_json}
  end
end
success: function(data){         
           $('#app_project_software_kingdom').val(data.software_kingdom);
           data.system_dom.forEach(function(dom) {
             $('#system_domain').append('<option value="' + dom.id + '">' + dom.name + '</option>');
           });
         }
7楼 已删除
5c8fb2
B44b1bfan124 回复

试了一下第二种的,option的确都已经取到了,但是在append的时候,发现页面一直载入无法加载数据到下拉列表中

5c8fb2
B44b1bfan124 回复

我现在取出的data.system_dom的数据是这样的

[{"name":"操作系统","id":7},{"name":"虚拟化软件","id":8},{"name":"中间件","id":9},{"name":"数据库","id":10},{"name":"运行时环境","id":11}]

我怎么给他转成这样的

[{name:"操作系统",id:7},{name:"虚拟化软件",id:8},{name:"中间件",id:9},{name:"数据库",id:10},{name:"运行时环境",id:11}]

还有你上面说的循环进不去,我用的这种

for(var o in data.system_dom){
  $('#app_project_system_domain').append('<option value="' + data.system_dom[o].id + '">' + data.system_dom[o].name + '</option>');
}

就可以进去了

5c8fb2
B44b1bfan124 回复

抱歉 我做错了,controller的action里可以不用to_json这个方法,因为已经包在format.json里了,所以打出来的东西是不对的。现在问题都解决了

5c8fb2 miserytan 关闭了讨论 07月17日 10:40
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册