Question

我正在执行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

以下是来自loadedHtml

的my.html的原始内容

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

我做错了什么？

更新

这是一个简单的例子，我试图在添加我真正需要做的事情的复杂性之前开始工作。因此，在将loadedHtml变量插入DOM之前使用简单的字符串替换不会对我有用。
我已更新我的代码以显示ajax调用是同步的。实际上loadedHtml变量确实包含了来自服务器的html，直到我试图修改它为止。

Answer 1

您滥用find功能：

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

仅搜索后代，在您的情况下#test1不是孩子......

所以这个：

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

不会抓取test1元素，它不是后代。

Answer 2

O.K。如果我“正确”阅读“问题+评论”，则您的代码不在成功函数之内你们要记住。 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 FAQ

Answer 3

假设您已经设法首先打印loadedHtml（并且您的AJAX调用没有任何问题），试试这个......

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

打印出来......; - ）

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

尝试1

尝试2

原创Html

更新

3 个答案: