1

对 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 ！”的消息警报......但是，仍然没有加载内容。

4

4 回答 4

4

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

当您使用 引用文件C:\...时，协议 if 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>

然后正如丹尼斯所提到的，由于违反同源策略，加载在您的情况下失败。所以你可以让 Yeah1,html 加载，但除非你切换到 google.com，否则调用 google.com 将失败jsonp

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

$.ajax({
    url: "http://www.google.com.my/",
    dataType: 'jsonp',
    jsonpCallback: 'jsonpCallback',
});
于 2011-08-24T15:45:26.677 回答
1

load 受相同来源策略的约束，因此您的请求可能会失败。

从文档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);
  }
});
于 2011-08-24T15:42:35.730 回答
1 
<li><a href="Yeah1.html" class="nav-link"> Yeah 2 </a></li>

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

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

覆盖。

于 2011-08-24T15:43:11.343 回答
1

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

http://api.jquery.com/load/ 附加说明：由于浏览器的安全限制，大部分“Ajax”请求都遵循同源策略；请求无法从不同的域、子域或协议成功检索数据。

于 2011-08-24T15:49:40.063 回答