我的jquery ajax代码出了什么问题

Question

我有ajax页面,我正在使用jquery来获取我的内容,但只有一个页面正在使用我的ajax函数,但我有两个或两个以上的页面..我可以修复它吗？

$(document).ready(function() {
  $('.lazy_content').each(function() {
    data_url = $(this).attr("data-url");
    data_id = $(this).attr("data-target-id");

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        $("#" + data_id).html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          $("#" + data_id).html(data);
        });
      }
    })
  });
});

<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

请点击查看完整版

Answer 1

截至目前,您正在覆盖内容.你需要使用.append()而不是.html()

//Define these variables 
var data_url = $(this).data("url");
var data_id = $(this).data("target-id");
var target = $("#" + data_id);

//Use append
$("#" + data_id).append(el);

$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var data_id = $(this).data("target-id");
    var target = $("#" + data_id);

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        target.html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          target.append(el);
        });
      }
    })
  });
});

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

或者,当您获得HTML片段时,您可以摆脱each()并直接使用

$("#" + data_id).html(data)

是的,您可以使用class选择器作为目标.

$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var target = $(this).find('.comment-area');
    $.ajax({
      url: data_url,
      type: "POST",
      success: function(data) {
        target.append(data)
      }
    })
  });
});

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div class="comment-area"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div class="comment-area"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>