Javascript 非常简单的 jQuery .load 示例不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5899525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Very Simple jQuery .load Example Not Working
提问by groovepriest
I think this is a very simple question, but I can't seem to get it to work. I need to use JavaScript (specifically jQuery, apparently) to grab some content from a page, and pull it into another page. I've researched this quite a bit, but can't seem to get even a very simple example to work.
我认为这是一个非常简单的问题，但我似乎无法让它发挥作用。我需要使用 JavaScript（特别是 jQuery，显然）从页面中获取一些内容，并将其拉入另一个页面。我已经对此进行了相当多的研究，但似乎无法得到一个非常简单的例子。
Here is the page I'm trying to get content from:
这是我试图从中获取内容的页面：
<!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>
Here is the page I'm trying to use to pull the content:
这是我试图用来提取内容的页面：
<!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>
When I open the page it doesn't seem to do anything. I'm basically trying to follow the examples from jquery.com: http://api.jquery.com/load/
当我打开页面时，它似乎没有做任何事情。我基本上是在尝试遵循 jquery.com 中的示例：http://api.jquery.com/load/
Both html pages are in the same folder somewhere on my C drive.
两个 html 页面都在我的 C 驱动器上的同一个文件夹中。
What am I missing?
我错过了什么？
Thanks in advance for your help!
在此先感谢您的帮助！
回答by Alnitak
What browser are you using?
你使用的是什么浏览器？
Because of same-origin policy, some browsers won't permit AJAX requests to file:///URLs, even if the original file was loaded that way. I know this is true of Chrome, but haven't tested others.
由于同源策略，一些浏览器不允许对file:///URL 的AJAX 请求，即使原始文件以这种方式加载。我知道这适用于 Chrome，但还没有测试其他人。
What does your .load()error handler say? Oh...
你的.load()错误处理程序说了什么？哦...
回答by matchew
It seems to make logical sense.
这似乎合乎逻辑。
Checking the API on load you may want to see if it actually loads, or if it encoutners an error
在加载时检查 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/
API 链接：http: //api.jquery.com/load/
sometimes the debugging information is a good first step to any solution.
有时，调试信息是任何解决方案的良好开端。
回答by justkt
You have your script tags at the end of your page, which means the enclosed JS will be invoked as soon as the browser reaches it, which may not be before the DOM is ready (which means the <ol>might not be set up to get the content of test.html). Try enclosing your load in a $(document).ready()callback as follows:
你在页面的末尾有你的脚本标签，这意味着一旦浏览器到达它就会调用封闭的 JS，这可能不是在 DOM 准备好之前（这意味着<ol>可能没有设置来获取内容test.html）。尝试将您的负载包含在$(document).ready()回调中，如下所示：
<script type="text/javascript">
$(document).ready(function() {
$('#result').load('test.html');
});
</script>
Also why are you inserting a full HTML page into an ordered list? You should try an HTML snippet (no head & body tags) into a content holder such as <div>or <span>where it will be semantically correct.
另外，为什么要在有序列表中插入完整的 HTML 页面？您应该尝试将 HTML 片段（无 head 和 body 标签）放入内容持有者中，例如<div>或<span>在语义上正确的地方。
If none of these things work, attach a callback as follows:
如果这些都不起作用，请按如下方式附加回调：
$('#result').load('test.html', null, function(responseText, textStatus, xhr) {
alert(textStatus); // see what the response status is
});
回答by epascarello
Where is the closing script tag?
结束脚本标签在哪里？
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</head>
Your code needs to be
你的代码需要
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
回答by Fred Bergman
回答by Edgar Villegas Alvarado
To ensure #result1is loaded, you need a document.readyevent handler:
为确保#result1已加载，您需要一个document.ready事件处理程序：
<script type="text/javascript">
$(document).ready(function(){
$('#result').load('test.html');
});
</script>
Hope this helps. Cheers
希望这可以帮助。干杯
