如何修改$.ajax调用中的数据？

Question

我有两个.html，content.html 和 footer.html。

内容.html

<div>
   <div class="footer-content"></div>
</div>

页脚.html

<div>copyright</div>

我对 content.html 进行了 ajax 调用，然后我想在显示它之前将 footer.html 附加到数据（内容）。

我已经尝试过了。

$.ajax({
  url: "filecheck.php", // Your server-side script
  data: { file: filePath }, // Pass the file path to the server-side script
  dataType: "html",
  async: false,
  success: function (data) {
    if (data === "error") {
      // If the server returns an error, redirect to 404
      window.location.href = "pages/404.html";
      return false;
    } else {
      // If the file exists, load the content
      console.log(data);
      if ($(data).find(".footer-content").length > 0) {
        // Load footer using AJAX
        console.log("put foote");
        $.ajax({
          url: "elements/footer.html",
          success: function (footer) {
            console.log("ok foot!");
            $(data).find(".footer-content").append(footer);
            //$(data)$('.footer-content', data).html(footer);
          },
        });
      }

      $("#content").html(data);
    }
  },
});

此代码似乎不起作用：

$(data).find('.footer-content').append(footer);

页脚数据未添加到 .footer-content

Answer 1

这可能是一个时间问题。

第二个

$.ajax()

成功回调在

$("#content").html(data)

执行后完成。 jQuery 的

.html()

方法通过

.innerHTML

设置字符串数据，并且不会保留对

$(data)

文档的引用；稍后向

data

添加元素不会对 DOM 产生任何影响。

解决方案是设置 HTML 数据，然后在

#content

中查找相关元素。如果存在，您可以将额外的 HTML 加载到其中。

$("#content").html(data);
$("#content .footer-content").load("elements/footer.html");

仅当选择器找到元素时，.load()方法才会运行。