javascript - 我的 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>

please click to see full version

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>