Question

还是jQuery的新手，需要以下方面的帮助：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">
     $(document).ready(function() {
         $('.nav-link').click( function() {
            var href = $(this).attr('href');
            $('#content').load( href, function() {
                alert("Yeahhhh !");
            });
            return false; // don't actually follow the link
         });
     });
</script>

<div class="menu">
    <ul>
    <li><a href="http://www.google.com.my/" class="nav-link"> Yeah 1 </a></li>
    <li><a href="C:\Testing\Yeah1.html" class="nav-link"> Yeah 2 </a></li>
    </ul>
</div>


<div id="content">
    ... Initial Content...
</div>  
 </body>
 </html>

我创建了这个名为testing.html的HTML文件，并有另一个名为yeah1.html的简单HTML文件用于测试目的。在放入jQuery代码之前，链接可以指向yeah1.html。

然而，在放入jQuery代码之后，$('#content').load( href);应该能够在其DIV中加载内容，我甚至得到了“Yeahhhh！”的消息提醒......但是，内容仍然是没装。

Answer 1

出于安全原因，许多浏览器（Chrome，FF）都会阻止直接从磁盘加载的文件。

当您使用C:\...引用该文件时，协议file。链接最终看起来像这样：

<a href="file:///C:\Testing\Yeah1.html" class="nav-link"> Yeah 2 </a>

要解决此问题，请将Yeah1.html文件放入网站的虚拟文件夹中，并使用绝对或相对路径通过http协议加载它。

（相对路径）

<a href="Yeah1.html" class="nav-link"> Yeah 2 </a>

或（绝对路径）

<a href="/Yeah1.html" class="nav-link"> Yeah 2 </a>

或（绝对路径，完全指定）

<a href="http://mysite.com/Yeah1.html" class="nav-link"> Yeah 2 </a>

然后提到Dennis，由于相同的原始政策违规，您的案例中的加载失败。所以你可以加载Yeah1，html，但除非你切换到jsonp

，否则调用google.com会失败

function jsonpCallback(data, status) {
    alert("data: " + data + ", status: " + status);
}

$.ajax({
    url: "http://www.google.com.my/",
    dataType: 'jsonp',
    jsonpCallback: 'jsonpCallback',
});

Answer 2

加载受原始政策的约束，因此您的请求可能会失败。

从文档http://api.jquery.com/load/检查错误与成功：

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

Answer 3

<li><a href="Yeah1.html" class="nav-link"> Yeah 2 </a></li>

将绝对路径更改为相对路径。将Yeah1.html放在与此文件相同的文件夹中。此外，Google Chrome和Firefox默认情况下不会从磁盘加载内容，请在调用chrome时使用--allow-file-access-from-files标志，如下所示：

c:\>chrome --allow-file-access-from-files

覆盖。

Answer 4

你可以加载域名中存在的任何内容，但由于安全原因，你无法从其他域加载页面。

http://api.jquery.com/load/ 补充说明：由于浏览器安全限制，大多数“Ajax”请求都遵循相同的原始策略;请求无法成功从其他域，子域或协议中检索数据。

jQuery加载问题

4 个答案: