javascript - 在 Rails 中使用 ajax 渲染查询

Question

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

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

我有这段代码，允许我查询数据库并在索引中打印结果。顺便说一句，代码正在运行，最后每次迭代都会在查询结果中为每个注册表打印一个“square”()。

Controller :

 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);



    });

  });
});

HTML:

<div id="clientList1"></div>

嗯，正如我之前所说，代码几乎可以完美运行。但我有两个主要问题。

1-)模型客户端，有几个模型父级，例如:国家/地区、城市、语言等。json 查询仅带来 ID，但不让我获取用于打印的名称。类似:“client.country.name”。那么我如何访问 parent 模型，以便打印姓名而不是 ID

2-) 与第一期类似，但涉及子模型，例如:“client.comments”。通常我会这样做 <%= render client.comments %> 但我无法从 JSON 执行此操作，因此这里的问题是如何访问与查询中每个寄存器关联的子模型。

有更好的方法吗？

提前谢谢您。

////更新

在浏览器中调用 localhost:3000/client/clientsjson.json?q=test 后，输出如下:

[{"comments":[]},{"comments":[]}, {"comments":[]}]

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

Answer 1

更好的方法是使用 jbuilder或RABL它们都允许您轻松地将关联数据包含在 json 响应中。

在您的例子中，您只需要在以下位置创建一个 View 文件:

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

然后将 Controller 操作更改为:

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

  respond_to do |format|
    format.json
  end
end

这应该为您提供所需的所有关联 json 节点。