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

【问题标题】：External file fail to load on 'load' function外部文件无法在“加载”功能上加载
【发布时间】：2017-05-13 03:32:49
【问题描述】：

我想在点击按钮时在我的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 的初学者，如有任何疑问，请在下方评论。

【问题讨论】：

您不能在file: URL 中使用 AJAX。使用网络服务器。

标签： javascript jquery

【解决方案1】：

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

（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

您可以使用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、192.168.1.1 等...）

【讨论】：

你的意思是我必须在像 xamp 这样的服务器上运行它？

【解决方案2】：

您受到HTTP access control (CORS) 的限制。您异步请求的文件需要来自同一个域，或者您正在访问它的域需要允许您的域访问它。当您使用file:/// 协议时，您需要允许它，所以请查看this，如果您希望这样做。

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

【讨论】：

【解决方案3】：

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

查看XAMPP

【讨论】：

【解决方案4】：

很遗憾，尽管 Firefox 允许，但 Google Chrome 不允许跨域请求。

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

    text_file = {
          contents = 'content';
    }

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

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

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

【讨论】：