Javascript 每次我请求时，Ajax都会显示我的整个html

这是一个rails应用程序，我正在尝试让Dynamicque成为我的Gmaps标记

在下面的代码中，我的html在每次请求时都会重复。。。 我对JS和Ajax非常陌生，请问我应该怎么做才能让它工作

$(function(){

  $('#normal-choice input').on('click', function(event) {
    var url = '/meals?';
    $.ajax({
      type: "GET",
      url: url,
      data: $('.normal-form').serialize(),
      success: function(data) {
        $('.meals-normal').replaceWith($(data).find('.meals-normal').parent().html()),
        $('#map').replaceWith($(data)).find('#map').updateMarkers(markerJson),

        history.replaceState({}, "meals", url);
      },

      error: function(jqXHR) {
        console.error(jqXHR.responseText);
      }
    });
  });
});

编辑 当

$（'#map'）.replacetwith（$（数据））.find（'#map'）.updateMarkers（markerJson）时不在代码中，过滤后重新加载时会很好地显示膳食
当我听到那句话的时候。。。它把一切都搞砸了

下面是我的一些代码：
这是我的膳食索引视图

<div class="container">
  <div class="row">

    <div class="col-sm-2">
      <section class="choice" id="normal-choice">
        <form action="/meals" method="get" class= "normal-form">
          <ul class="list-unstyled">
            <% @categories.each do |category| %>
              <li>
                <label class="categories">
                  <input type="checkbox" name="categories[]" value="<%= category.name %>"
                    <%= "checked" if !params[:categories].nil? && params[:categories].include?(category.name) %>>

                  <span>
                     <span class="icons text-center">
                        <i class="fa fa-heart" aria-hidden="true"></i>
                     </span>
                    <%= category.name %>
                  </span>

                </label>
              </li>
            <% end %>
          </ul>
          <input class="valid-btn" type="submit" value="Filtrer">
        </form>
      </section>
    </div>

  <div class="col-sm-10">
    <section class="meals-normal">
      <% if @meals_count != 0 %>
        <div class="row">
          <% @meals.sort.each do |meal| %>
            <div class="col-xs-12 col-sm-6 col-md-4">
              <%= link_to meal_path(meal) do %>
              <div class="card-meal">
                <div class="description text-center">
                  <div class="description-meal">
                    <h3><%= meal.menu_name  %></h3>
                    <span><small><%= meal.category.name %></small></span>
                    <br>
                    <% if  meal.images?%>

                      <%= cl_image_tag meal.images.first.path, width: 200, height: 100, crop: :fill %>

                    <% end %>
                    <h4>Cuisiné par: <%= meal.user.nickname %></h4>
                    <p>Prévu pour le: <%= meal.availability %></p>
                  </div>
                  <div class="price-icons">
                    <p> <%= humanized_money_with_symbol(meal.price) %></p>
                  </div>
                </div>
              </div>
            </div>
            <% end %>
          <% end %>
        </div>

      <% else %>
        <p class="no-meal">Aucun repas ne correspond à votre recherche.

         <%= link_to 'Effacer les filtres', meals_path('category[]' => 'all') %>
         </p>
      <% end %>

    </section>
  </div>

  </div>
  <div id="map" style="width: 100%; height: 600px;" data-markers='<%= raw @markers_hash.to_json %>'></div>

</div>

谢谢你的帮助：）
我会尝试用不同的方式回答你当前的答案

1.为ajax创建路由，

这取决于您想要实现的目标，如果您希望显示数据，则使用get创建路由的数据
若你们想从用户那个里获得输入，那个么你们就用post创建路由，下面是get和post的示例代码

resources :some_resources do
collection {
    get  :get_data 
}
end
resources :some_resources do
collection {
    post :accept_data  
}

结束


2.使用控制器获取数据

下面是控制器的示例

def get_data
   # here you search data to show
end



3.创建链接以调用ajax

在rails中使用ajax的关键是使用关键字remote:true（）



4.使用js格式创建视图

由于我们使用remote:true，rails将自动渲染get_data.erb.js通常不使用remote:true rails只渲染get_data.erb.html（请确保将此文件放在/app/views/some_resources/文件夹中）
将js代码放在这里以显示数据
通常我使用引导模式来显示下面代码中的数据

// Render the new form
$('.modal-body').html('<%= j render("pop-up-form.html.erb") %>');
// Show the dynamic dialog
$('#dialog').modal("show");

//呈现新表单
$（'.modal body'）.html（''）；
//显示动态对话框
$（'dialog'）.modal（“show”）；

在不知道“数据”包含什么的情况下，很难提供帮助。不过：这有帮助吗？@newBee我编辑了数据，没有遗憾，jsfidle没有帮助：（这会让我更改大部分代码……我肯定我错过了一点。。。。
// Render the new form
$('.modal-body').html('<%= j render("pop-up-form.html.erb") %>');
// Show the dynamic dialog
$('#dialog').modal("show");