Question

我认为这是一个非常简单的问题，但我似乎无法让它发挥作用。我需要使用JavaScript（显然是jQuery）从页面中获取一些内容，并将其拉入另一个页面。我对此进行了相当多的研究，但似乎无法得到一个非常简单的例子。

以下是我试图从中获取内容的页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<p>This is the test html page.</p>
</body>
</html>

以下是我试图用来提取内容的页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>PullData</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</head>
<body>

<ol id="result"></ol>

<script type="text/javascript">
$('#result').load('test.html');
</script>

</body>
</html>

当我打开页面时，似乎没有做任何事情。我基本上试图遵循jquery.com中的示例：http://api.jquery.com/load/

两个html页面都在我的C盘上的某个文件夹中。

我错过了什么？

提前感谢您的帮助！

Answer 1

您使用的浏览器是什么？

由于同源策略，某些浏览器不允许向file:/// URL发出AJAX请求，即使原始文件是以这种方式加载的。我知道Chrome确实如此，但尚未测试其他人。

您的.load()错误处理程序说什么？哦...

Answer 2

您的页面末尾有脚本标记，这意味着一旦浏览器到达就会调用随附的JS，这可能不是在DOM准备好之前（这意味着<ol>可能没有设置来获取test.html的内容）。尝试将您的负载封装在$(document).ready()回调中，如下所示：

<script type="text/javascript">
$(document).ready(function() {
    $('#result').load('test.html');
});
</script>

另外，为什么要将完整的HTML页面插入有序列表？您应该尝试将HTML代码段（没有头部和身体标记）放入内容持有者，例如<div>或<span>，这样语义上就是正确的。

如果这些都不起作用，请按如下方式附加回调：

$('#result').load('test.html', null, function(responseText, textStatus, xhr) {
    alert(textStatus); // see what the response status is
});

Answer 3

这似乎符合逻辑。

在加载时检查API，您可能希望查看它是否实际加载，或者是否包含错误

$("#result").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#result").html(msg + xhr.status + " " + xhr.statusText);
  }
});

API LINK：http://api.jquery.com/load/

有时调试信息是任何解决方案的良好第一步。

Answer 4

结束脚本标记在哪里？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</head>

您的代码需要

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

Answer 5

您必须先检查您的HTML是否为ready。

$(document).ready(function() {
    $('#result').load('test.html');
});

Answer 6

要确保加载#result1，您需要一个document.ready事件处理程序：

<script type="text/javascript">
$(document).ready(function(){
  $('#result').load('test.html');
});
</script>

希望这会有所帮助。干杯

非常简单的jQuery .load示例不起作用

6 个答案: