简单的 ajax load() 在 jquery 中不起作用答案

【问题标题】：simple ajax load() not working in jquery简单的 ajax load() 在 jquery 中不起作用
【发布时间】：2012-07-27 07:56:45
【问题描述】：

我正在尝试找出函数 load() 在 Chrome 和 Firefox 中不起作用的问题。使用 Internet Explorer 可以很好地工作。

我有一个 WampServer。

在 Chrome 中，我收到错误：

Access-Control-Allow-Origin 不允许 Origin null

我把文件放在本地服务器上，它是在线的。我可以访问图像，请参阅代码。但是load() 出了什么问题？

<body>
    here is a image
    <img src="/wamp/www/testing/baby2.jpg" width="100px" height="200px"></img>   

    <ul id="aj">
        <li><a href="/wamp/www/testing/celeb1.html">One</a></li>
        <li><a href="/wamp/www/testing/celeb2.html">Two</a></li>
        <li><a href="/wamp/www/testing/celeb3.html">Three</a></li>
    </ul>
    <br>
    <div id="desc">

    </div>

    <script>
    $(document).ready(function(){
        $('#aj a').click(function(){
            var v= $(this).attr('href');

            $('#desc').load(v);
            return false;
        });
    });//ready
    </script>
</body>

提前致谢。

【问题讨论】：

这意味着 Chrome（可能还有 Firefox）认为您正在发出跨域请求。如果您通过服务器加载页面但可能是直接加载文件，则情况不应该如此？代码本身是正确的。
在地址栏中查看您的 URL。如果它以file:// 开头，那么同源策略将限制对其他文件的访问。 Firefox 将不允许您在该页面目录之外获取文件 (link)，Chrome 将不允许任何访问 (link)。此外，如果页面 URL 以 file:// 开头，则您不会通过 Web 服务器访问文件，这将通过 http:// 完成。

标签： javascript jquery ajax

【解决方案1】：

我认为是 URL 的问题

试着把它们写成 ....

     <ul id="aj">
       <li><a href="/testing/celeb1.html">One</a></li>
       <li><a href="/testing/celeb2.html">Two</a></li>
       <li><a href="/testing/celeb3.html">Three</a></li>
    </ul>

你也可以看看@这个Topic

【讨论】：

【解决方案2】：

这是 Chrome 的问题：see this bug 和 this answer。

您可能需要使用特殊的命令行标志来启动 Chrome：

chrome.exe --allow-file-access-from-files

【讨论】：

【解决方案3】：

在您的 Apache 设置中（转到 WAMP 安装中名为 httpd.conf 的文件），您为主目录指定了什么？当您使用以正斜杠开头的链接（例如/testing/celeb1.html）时，您的浏览器会转到此页面。

通常情况下，它会类似于/wamp/www/。因此，您只需将 URI 的 /testing/... 部分用于超链接。

【讨论】：