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

Question

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

3

我认为这是一个非常简单的问题，但是我似乎无法让它正常工作。我需要使用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驱动器上的同一个文件夹中。

我错过了什么吗？

非常感谢您的帮助！

- groovepriest

6个回答

4

这似乎是有逻辑意义的。

在加载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链接: http://api.jquery.com/load/

有时候调试信息是解决问题的好第一步。

- matchew

3

您的脚本标签位于页面末尾，这意味着内部 JS 将在浏览器到达它之后立即调用，这可能发生在 DOM 准备好之前（这意味着 <ol> 可能还没有设置好来获取 test.html 的内容）。请尝试将您的加载放入 $(document).ready() 回调中，如下所示：

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

同时，您为什么要将完整的HTML页面插入有序列表中呢？您应该尝试将HTML片段（没有head和body标签）插入内容容器，例如<div>或<span>中，这样会更加语义化。

如果以上方法都不奏效，请按照以下方式附加一个回调函数：

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

- justkt

2

<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>

- epascarello

我有两个问题。这是其中之一。当然，在我没有漏掉闭合标签的情况下，我已经尝试了很多次……只是在提问时不知何故错过了它。谢谢！ - groovepriest

0

你必须先检查你的HTML是否准备就绪。

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

- Fred Bergman

0

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

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

希望这能有所帮助。干杯！

- Edgar Villegas Alvarado

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alnitak · Accepted Answer

您正在使用哪个浏览器？

由于同源策略的限制，某些浏览器不允许向file:/// URL发出AJAX请求，即使原始文件是以这种方式加载的。我知道Chrome是这样的，但还没有测试其他浏览器。

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