Question

我尝试做的是加载外部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);
});

Answer 1

默认情况下，Ajax调用是异步的，因此您所拥有的将不起作用。我建议使用jQuery的.load()来处理整个加载到div的部分（jQuery参考信息here）。

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

为此，必须满足以下要求：

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

如果您想了解更多有关无法从异步Ajax调用返回数据的原因，请阅读this answer。异步调用稍后完成一些不确定的时间，因此唯一可靠的使用结果的地方是完成回调或在完成回调中调用的函数。在这种情况下，.load()是更高级别的jQuery功能，使这更容易。

Answer 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;
      }
});
});

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

2 个答案: