javascript - 为什么我的 jQuery 加载功能不起作用？ - 在 Chrome 上

Question

我有这个html:

<div class="box" id="n5">
    <p class="text">Lorem ipsum dolor sit amet</p>
    <textarea id="contentArea" rows="10" cols="50"></textarea>
    <div class="more">LikeAlink</div>
</div>

还有这个 jQuery 函数:

$(document).ready(function(){
    $(".box .more").click(function(event){
        $.ajax({
            url : "test.txt",
            success : function (data) {
                $("#contentArea").html(data);
            }
        });
    });
});

我在互联网上找到了这个解决方案作为示例。为什么它对我不起作用？我使用 Chrome，但该示例在此浏览器上运行。

内容不会出现在文本框中。 Example

编辑:

我在控制台中看到此错误消息:

XMLHttpRequest cannot load file:///C:/wamp/www/test.txt. Origin null is not allowed by Access-Control-Allow-Origin

编辑#2:

对于那些感兴趣的人来说，这似乎是本地服务器上的 Chrome 中的一个问题。要进行测试，请使用此参数启动 Chrome

--disable-web-security

chrome.exe --disable-web-security

Answer 1

根据您的评论

XMLHttpRequest cannot load file:///C:/wamp/www/text.txt. Origin null is not allowed by Access-Control-Allow-Origin

这是因为您是从文件系统加载它，而不是通过 Web 服务器提供它。

我对一些 JSON 数据做了完全相同的事情，并得到了相同的结果。在您的 Web 服务器中设置正确的 MIME 类型并从 http://example.com/text.txt 提供服务而不是 file:///C:/wamp/www/text.txt

如果您认为所有配置均已正确，请尝试首先记录数据返回的内容。

$(document).ready(function(){
    $(".box .more").click(function(event){
        $.ajax({
            url : "test.txt",
            success : function (data) {
                // either
                alert(data);
                // or
                console.log(data);
            }
        });
    });
});

在 jQuery 站点上了解有关 jquery.ajax 的更多信息。

http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.ajaxSetup/