Javascript 在Rails中使用ajax呈现查询

我需要以下问题的帮助或指导。每次在搜索表单中发生更改时，我都会使用ajax动态地从数据库重新加载查询

其目的是根据搜索表单中选择的参数动态加载N个寄存器

我有这段代码，允许我对数据库进行查询，并在索引中打印结果。顺便说一下，代码正在工作，最后每次迭代都会为查询结果中的每个注册表打印一个“正方形”（）

控制器：

 def clientsjson

      @search  =  Client.search(params[:q])
      @clients = @search.result

      respond_to do |format|
        format.json { render :json => @clients }
      end
  end

Js文件

$(document).ready(function() {
   $( ".searchupdate" ).change(function() {

    $.getJSON("/client/clientsjson?"+$('#client_search').serialize(), function (data) {

        var $ul = $('<div></div>');

         $ul.append(data.map(function(data) {
                var $ini= '<div class=\"panel-mate bgray-o\"><div class=\"row\">'

                var $inicio='<div class=\"col-xs-4\" align=\"center\">'
                var $titulo='<h3 style="height:45px; width:100% overflow:hidden"><a class="h1-small" href="/es/auctions/'+data['id']+'">'+data['name']+'</a></h3>'
                var $titulo2='<h5 class="cursive txt-gray-lig negrita font-serif">City, Country</h5>'
                var $titulo3='<h5 class="cursive txt-gray-lig negrita font-serif">Idioma:</h5>'
                var $titulo4='<a data-toggle="modal" data-id="1" title="View comments" class="open-modal-auction" href="#myModalc'+data['id']+'"><h5 class="txt-auto" style="margin-top: 10px">'
          var $titulo5='Rating:<img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /><img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /><img src="/assets/estrella-991be5754e32c5209a9b4c697cf93320.png" alt="Estrella" width="20" height="20" /></h5></a>'
                var  $fin='</div>'

              var $column2='<div class=\"col-xs-5\" align=\"center\"><br>'
              var $parte1 ='<h4 class="negrita cursive font-serif">'+data['date']+'</h4>'
              var $parte2 ='<h3 class="negrita cursive font-serif" style="margin-top: 2px">Maximum Price<span class="txt-mor ">'+data['maximum_price']+'</span></h3> <h5 class="cursive txt-gray-lig"> Duración: '+data['duration']+'</h5>'
              var $parte3 ='<br/><p style="margin-top:-12px"><a data-toggle="modal" data-id="1" title="Bid" style:"width:120px;" class="open-modal-auction btn btn-morado luz-btn-mor" href="#myModal'+data['id']+'">Puja Avanzada</a></p>'
              var $column2fin='</div>'

              var $column3='<div class="col-xs-3 div-general" align="center" style="padding:">'
              var $column1='<p style="margin-top: 20px"><img src="/assets/bid-c355299aa9a59c701f6768169153b0e6.jpg" alt="Bid" width="75" height="50" /><a data-toggle="modal" data-id="1" title="Bid"  class="open-modal-auction" href="#myModalbids'+data['id']+'" style="margin-left:5px">Pujas</a></p>'
              var $form='<div class="borde-color-mora" style="padding-top:5px; margin-top:20px"><form novalidate="novalidate" class="formtastic bid" id="new_bid" action="/es/bids" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="QkFLk2OiMkFyMx5eeYqsAWex8DVeSpAT2YOnr1sY3kOIXKjsx4F0GRHs7a6byMCReue0Y82EScIUWXSErRxnhA==" /><div class="hidden input optional form-group" id="bid_auction_id_input"><span class="form-label"><label for="bid_auction_id" class=" control-label">Auction</label></span><span class="form-wrapper"><input id="bid_auction_id" value="1" type="hidden" name="bid[auction_id]" /></span></div><p align="left" style="margin-left:5px">Pujar  <input class="borde-color-mora" style="width: 100px; text-align:right" type="text" value="0.0" name="bid[amount]" id="bid_amount" /></p>'
          var $form2='<input type="submit" name="commit" value="Bid Fast" class="btn btn-morado luz-btn-mor" id="button-bid" style="margin-top:5px; margin-bottom:20px" data-loading-text="Loading..." autocomplete="off" /></form></div>'
              var $column3fin='</div>'

                var $end= '</div></div>'




         return $($ini+$inicio+$titulo+$titulo2+$titulo3+$titulo4+$titulo5+$fin+$column2+$parte1+$parte2+$parte3+$column2fin+$column3+$column1+$form+$form2+$column3fin+$end)
         }));

         $('#clientList1').html('');
         $('#clientList1').empty().append($ul);



    });

  });
});

Json生成器文件：

json.array! @clients do |client|
  json.id
  json.name
  json.rate
  json.address
  json.date
  json.numbercomments

  json.comments client.comments, :subject, :comment,:created_at

  json.country do
    json.name
  end

  json.city do
    json.name
  end

  json.language do
    json.name
  end

end

这是我在route.rb中创建的调用操作的路径

get 'client/clientsjson' => "clients#clientsjson", :as => 'clientsjson', :format => :json

---

更好的方法是使用or，两者都允许您轻松地在json响应中包含相关数据

在本例中，您只需在以下位置创建视图文件：

app/views/clients/clientjson.json.jbuilder

然后您的jbuilder将看起来像：

json.array! @clients do |client|
  json.id client.id
  json.name client.name
  json.rate client.rate
  json.address client.address
  json.date client.date
  json.numbercomments client.numbercomments

  json.comments client.comments, :subject, :comment, :created_at

  json.country do
    json.name client.country.name
  end

  json.city do
    json.name client.city.name
  end

  json.language do
    json.name client.language.name
  end

end

然后将控制器操作更改为：

def clientsjson
  @search  =  Client.search(params[:q])
  @clients = @search.result

  respond_to do |format|
    format.json
  end
end

---

这将为您提供所需的所有相关json节点。

更好的方法是使用或两者都允许您轻松地在json响应中包含相关数据

在本例中，您只需在以下位置创建视图文件：

app/views/clients/clientjson.json.jbuilder

然后您的jbuilder将看起来像：

json.array! @clients do |client|
  json.id client.id
  json.name client.name
  json.rate client.rate
  json.address client.address
  json.date client.date
  json.numbercomments client.numbercomments

  json.comments client.comments, :subject, :comment, :created_at

  json.country do
    json.name client.country.name
  end

  json.city do
    json.name client.city.name
  end

  json.language do
    json.name client.language.name
  end

end

然后将控制器操作更改为：

def clientsjson
  @search  =  Client.search(params[:q])
  @clients = @search.result

  respond_to do |format|
    format.json
  end
end

---

这将为您提供所需的所有相关json节点。

我同意使用jbuilder或RABL生成json。这使您可以控制需要恢复多少，还可以为相关记录生成嵌套数组，等等

---

对于这样的一些人，我也会尝试使用类似Backbone.JS和handlebar的东西来进行javascript模板化。您不必这样做，但会更清晰地将HTML与Javascript分开，使将来对HTML或JS的更改更容易。任何JS模板系统都可能更好，而且一个也没有，但我对主干和把手很满意。

我同意使用jbuilder或RABL生成json。这使您可以控制需要恢复多少，还可以为相关记录生成嵌套数组，等等

---

对于这样的一些人，我也会尝试使用类似Backbone.JS和handlebar的东西来进行javascript模板化。您不必这样做，但会更清晰地将HTML与Javascript分开，使将来对HTML或JS的更改更容易。任何JS模板系统都可能更好，而且没有，但我对主干和把手很满意。

您好，谢谢您的回答我一直在尝试应用您的建议，现在似乎查询结果是空的，或者创建的对象没有DB值。有什么想法吗？首先，您是否获得了所需的JSON输出？我没有测试jbuilder代码，所以它可能不正确。你能点击localhost:3000/client/clientsjson.json吗？q=test并发布你的输出吗？我用json的输出更新帖子。很明显，奥比尤斯没有给我我想要的结果。你能用你的jbuilder（或Rabl？）模板编辑你的问题吗，我在问题中添加了jbuilder模板您好，谢谢您的回答我一直在尝试应用您的建议，现在看来查询结果是空的，或者创建的对象没有DB值。有什么想法吗？首先，您是否获得了所需的JSON输出？我没有测试jbuilder代码，所以它可能不正确。你能点击localhost:3000/client/clientsjson.json吗？q=test并发布你的输出吗？我用json的输出更新帖子。很明显，奥比尤斯没有给我我想要的结果。你能用你的jbuilder（或Rabl？）模板编辑你的问题吗？完成了，我在问题中添加了jbuilder模板