在将html添加到文档中之前，如何修改ajax调用中的html

How can I modify html from an ajax call before adding it into document?

本文关键字：html 修改 ajax 调用 何修改 添加 文档 在将      更新时间：2023-09-26

我正在执行一个ajax调用，以从服务器获取HTML页面；ajax调用如下：

function loadHtml() {
    $.ajax({
          type          :  'GET',
          async         :  false,
          url           :  'my.html',
          contentType   :  'text/html',
          dataType      :  'html',
          success       :  function(data) {
              loadedHtml = data; // the loadedHtml variable is global
          }
    });
}

稍后，我想在对这个html进行一些修改后显示它。

尝试1

我试过了，但结果屏幕上什么都没有显示（正文中不包含html）。

var myContent = $(loadedHtml).find('#test1').text("Modified!");
$('body').html(myContent);

尝试2

我也尝试过，但最终的屏幕只显示了loadedHtml的原始内容。

var myContent = $(loadedHtml);
myContent.find('#test1').text("Modified!");
$('body').html(myContent);

原始Html

以下是my.html 中loadedHtml的原始内容

<div id="test1" style="color: white;"> Working! </div>

我做错了什么？

更新

  1. 这是一个简单的例子，我试图在增加我真正需要做的事情的复杂性之前开始工作。因此，在将loadedHtml变量插入DOM之前，对其使用简单的字符串替换对我来说是不可行的
  2. 我已经更新了代码，以显示ajax调用是同步的。事实上，当我尝试修改loadedHtml变量时，它确实包含了来自服务器的html

您滥用了find函数：

给定一个表示一组DOM元素的jQuery对象，.find（）方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素中构造一个新的jQuery。.find（）和.children（）方法相似，只是后者只在DOM树下移动一个级别。

它只搜索后代，在您的情况下，#test1不是子代

所以这个：

$('<div id="test1" style="color: white;"> Working! </div>').find('#test1')

不会获取test1元素，它不是子代。

OK。如果我"正确阅读"了问题+注释，则您的代码超出了成功函数
你们必须记住。ajax是异步的！在成功处理程序中移动代码。

"AJAX中的‘A’代表异步。"

但是如何在函数的上下文中使用响应呢？考虑一下这个有缺陷的例子，我们试图更新页面上的一些状态信息：

function updateStatus() {
     var status;
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             status = response;
         }
     });
     // update status element?  this will not work as expected
     $('#status').html(status);
}

由于异步编程的性质，上面的代码不能按预期工作。所提供的成功处理程序不会立即调用，而是在将来从服务器接收到响应时调用。因此，当我们在$.ajax调用之后立即使用"status"变量时，其值仍然是未定义的。下一个片段展示了我们如何重写这个函数以使其行为符合要求：

function updateStatus() {
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             // update status element
             $('#status').html(response);
         }
     });
}

jQuery常见问题解答

假设您已经成功地打印了loadedHtml（并且您的AJAX调用没有任何问题），请尝试。。。

loadedHtml.replace("test1","modified");

并打印出来…；-）

相关文章：