為什么我的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);
            }
        });
    });
});

我在Internet上找到了此解決方案作為示例。 為什么對我不起作用？ 我使用的是Chrome，但該示例在此瀏覽器上有效。

內容未出現在文本框中。 例

編輯：

我在控制台中收到以下錯誤消息：

XMLHttpRequest無法加載file：/// C：/wamp/www/test.txt。 Access-Control-Allow-Origin不允許使用原點null

編輯＃2：

對於那些感興趣的人來說，在本地服務器上的Chrome中似乎是一個問題。 要進行測試，請使用以下參數啟動Chrome

-禁用網絡安全

chrome.exe-禁用網絡安全

Answer 1

根據您的評論

XMLHttpRequest無法加載file：/// C：/wamp/www/text.txt。 Access-Control-Allow-Origin不允許使用原點null

這是因為您是從文件系統加載它，而不是通過Web服務器提供它。

我對一些JSON數據執行了完全相同的操作，並得到了相同的結果。 在您的Web服務器中設置正確的MIME類型，並從http://example.com/text.txt而不是file:///C:/wamp/www/text.txt

如果您認為所有配置均正確，請嘗試記錄data返回的第一步。

$(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/