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

miserytan · 2017年07月14日 · 最后由 miserytan 回复于 2017年07月17日 · 2856 次阅读

我有一个 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 都打出来,但是就是不显示,哪位前辈指引一下

$('#system_domain').append("<%= @system_dom %>");

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

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

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

试试这种方法
在 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 %>

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


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楼 已删除
fan124 回复

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

fan124 回复

我现在取出的 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>');
}

就可以进去了

fan124 回复

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

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