Question

我想点击按钮，在我的div中加载外部文本文件（demo.txt）的内容。

文本文件包含文本'演示文字。'

但它显示错误

XMLHttpRequest cannot load file:///C:/Users/Tom/Desktop/jQuery%20thenewboston/76.)%20Load%20function/demo.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

在我的浏览器控制台上。

$(document).ready(function(){
	$('#button_file').on('click',function(){
		$('#load_html').load('demo.txt');
	});
});

<button type="button" id="button_file">Load file</button>
		<br />
	    <div id="load_html" >
		</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我是jquery的初学者，请在下面评论任何查询。

Answer 1

您无法获得结果，因为远程网站未启用CORS：如果您查看控制台，则会看到：

（原因：CORS标题＆＃39; Access-Control-Allow-Origin＆＃39;缺失）。

您可以使用anyorigin.com之类的内容绕过CORS，即：

$.getJSON('http://anyorigin.com/get/?url=http%3A//thenewboston....&callback=?', function(data){
    $('#div-data').html(data.contents);
});

PS ：如果是本地文件，请确保将其加载到与脚本相同的地址，（localhost，127.0.0.1，{{1等等......）

Answer 2

您受到HTTP access control (CORS)的限制。您异步请求的文件需要来自同一个域，或者您从中访问它的域需要允许您的域访问它。当您使用file:///协议时，您需要允许它，因此请查看this是否符合您希望的方式。

或者，您可以创建一个本地Web服务器来托管您的站点，允许访问同一域中的文件。

Answer 3

为了完成这项工作，您需要使用Web服务器，而不是仅使用html文件。

检查XAMPP

Answer 4

不幸的是，谷歌Chrome不允许跨源请求，尽管Firefox确实如此。

或者，如果文本文件很短，您可以将其存储在对象中并将其放在任何您喜欢的位置。

    text_file = {
          contents = 'content';
    }

    $('.button_class').on('click',function(){
         $('.div').html(text_file.contents);
    });

我绝不会建议你使用它，但如果它是一个小项目，一个单页的应用程序，没有人会看到代码 - 绝望的时候要求绝望的措施。

最好的办法是使用XAMPP和PHP。从数据库中加载您要显示的内容。您可以阅读PHP文档或观看在线教程，我个人建议TheNewBoston PHP Tutorials with Alex Garrett

外部文件无法在“加载”功能上加载

4 个答案: