非常简单的 jQuery.load 示例不工作
[英]Very Simple jQuery .load Example Not Working
问题描述
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.我需要使用 JavaScript （特别是 jQuery，显然）从页面中获取一些内容，并将其拉入另一个页面。 I've researched this quite a bit, but can't seem to get even a very simple example to work.我已经对此进行了很多研究，但似乎连一个非常简单的例子都无法工作。
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.Z4D236D9A2D9A2C55FE6DFE6AD1C50DA4BEC50Z：Z80791B3AE7002CB2C2C2468C2C248C29.88C29FAPA.2C2CBBEC2C55FE.Z4D9AFA.Z4D2C59FA.2.RE476D9FAE76D9FAPA.2.2CBBEC.Z4D29.FAE76D9FAPA.2.2.2.2.2.2.23.1D9FAPA.RAPE
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!在此先感谢您的帮助！
6 个解决方案
解决方案1
5 已采纳 2011-05-05 14:39:38
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.由于同源策略，一些浏览器不允许 AJAX 请求到file:/// URL，即使原始文件是以这种方式加载的。 I know this is true of Chrome, but haven't tested others.我知道 Chrome 是这样，但还没有测试过其他的。
What does your .load() error handler say?你的.load()错误处理程序说什么？ Oh...哦...
解决方案2
3 2011-05-05 14:39:32
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).您的页面末尾有您的脚本标签，这意味着一旦浏览器到达它，就会调用随附的 JS，这可能不会在 DOM 准备好之前（这意味着<ol>可能未设置为获取 test.html 的内容）。 Try enclosing your load in a $(document).ready() callback as follows:尝试将负载包含在$(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?另外，为什么要将完整的 HTML 页面插入有序列表？ 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 片段（没有头部和身体标签）放入内容持有者，例如<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
});
解决方案3
3 2011-05-05 14:40:23
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.有时调试信息是任何解决方案的良好第一步。
解决方案4
2 2011-05-05 14:41:43
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>
解决方案5
0 2011-05-05 14:39:35
解决方案6
0 2011-05-05 14:40:15
To ensure #result1 is loaded, you need a document.ready event handler:为确保#result1已加载，您需要一个document.ready事件处理程序：
<script type="text/javascript">
$(document).ready(function(){
$('#result').load('test.html');
});
</script>
Hope this helps.希望这可以帮助。 Cheers干杯
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.