如何使用 jquery 将 ajax 数据加载到 div 中？答案

【问题标题】：How do I load the ajax data into a div with jquery?如何使用 jquery 将 ajax 数据加载到 div 中？
【发布时间】：2015-12-25 04:41:00
【问题描述】：

我正在尝试加载一个外部 html 页面，然后在单击按钮时在 div 中显示内容。

我收到显示 test.html 内容的警报消息，但是当我尝试在 div 中显示它时没有任何反应。

内容只是一个 div 标签。我不想只加载 div 标签，它只是出现在警报消息中的文本本身。

在一个 html 文件中，我知道我真的不需要将 ajax 用于如此简单的事情，但是如果我可以让它工作，它将帮助我解决未来的问题。

      $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
                    step1j = data;
            alert(step1j); // WORKS
            return step1j;
                }
    });


$("#step1").click(function() {
    $("#texter").html(step1j);
});

【问题讨论】：

您无法从 ajax 调用返回。您可以在点击时进行调用，并在成功时分配 html。

标签： javascript jquery html ajax load

【解决方案1】：

默认情况下，Ajax 调用是异步的，因此您无法使用。我的建议是使用 jQuery 的 .load() 为您处理整个加载到 div 中（jQuery 参考信息 here）。

$("#step1").click(function() {
    $("#texter").load("test.html");
});

为此，必须满足以下条件：

#step1 必须在您运行此初始代码时已经存在（例如，必须已经加载 DOM 才能安装 .click() 处理程序。例如，您不能从 <head> 标记中的代码安装点击处理程序，因为页面 DOM 尚未加载。
#texter 在点击时必须存在。请确保那里没有拼写错误。
您正在加载的 URL 必须与您运行 javascript 的网页同源（例如同一个域）。这是因为浏览器的“同源”安全限制。

阅读this answer，如果您想详细了解为什么不能像您尝试的那样从异步 Ajax 调用返回数据。异步调用稍后会在不确定的时间内完成，因此使用其结果的唯一可靠位置是在完成回调或您从完成回调中调用的函数中。在这种情况下，.load() 是一个更高级别的 jQuery 功能，它使这更容易。

【讨论】：

谢谢，我试过 .load 但它仍然没有更新 div 中的数据。我是否需要声明一个包含 test.html 内容的变量然后显示它？
@CodegenesisG - 如果您的 URL 与您的页面的来源相同（例如，相同的域、端口和协议），那么 .load() 就像我已经展示的那样，它本身就可以正常工作。如果您的 URL 不是同源，那么由于浏览器的“同源”安全限制，您根本无法使用 ajax 获取该内容。如果您从同一个来源加载并且仍然无法正常工作，那么您尚未披露的其他内容是错误的，因为这种类型的代码可以正常工作。
我还需要 ajax 代码块才能工作吗？
@CodegenesisG - 请阅读我在上面和这里再次链接的jQuery doc page。这一切都在那里拼写出来。正如我在回答中所说，.load() 将为您完成这一切，无需其他 ajax 调用。您的 div 是 #texter 还是 #tester，因为拼写错误可能会导致它失败？
感谢我现在检查它们。我认为问题可能出在实际的 test.html 文件上

【解决方案2】：

试试这个：

$("#step1").click(function() {

    $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
            $("#texter").html(data);
            //step1j = data;
            //alert(step1j); // WORKS
            //return step1j;
      }
});
});

【讨论】：

谢谢我试过了，我没有在控制台中收到任何错误，但是数据仍然没有更新到 div。生病继续努力。再次感谢
放回警报（数据）；成功：，当你点击#step1时它是否从test.html加载html？
是的，当我单击按钮时，警报（数据）；有效，但 div 内容不更新。 #tester 的名称和 id 都是正确的。
是#tester 还是#texter？
发短信很抱歉打错了