【HTML5】用 jQuery(Ajax) 读取本地文本文档并替换 html 元素内容

Duawieh

已于 2024-01-15 21:24:39 修改

阅读量739

点赞数

文章标签： jquery ajax html 前端 javascript

于 2023-07-30 20:58:18 首次发布

本文链接：https://blog.csdn.net/qq_42097628/article/details/132010239

版权

引言

如果你希望让自己的页面呈现更高的可配置性，比如在页面上显示从文件内读取的内容，那么可以考虑使用 jQuery 来实现这个设想。

成果展示图
其中标题和副标题来自如下路径（ ./ 即 index.html 所在位置）：

./contents/showcase/title.txt
./contents/showcase/subtitle.txt

未加载相应文本文档时显示为：

未加载时效果

在开始之前我们先介绍一下 jQuery。

首先，HTML 作为静态页面的开发工具，是不具备文件操作的能力的，要实现这个目标，就不得不使用 javascript 通过 DOM 来完成。

jQuery 是基于 javascript 编写的一个库，你可以认为它相当于 C语言中的头文件，总之是一套编写号的工具集，使用它可以大大简化代码，提高效率。

在这里，我们使用 jQuery 内集成的 Ajax 来完成这一目标。

要使用 jQuery，您应该首先在代码中添加以下语句：

<head>
	...
	<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>

这样就相当于引用了头文件，您在编写时使用 jQuery 语句才不会报错。

我们将 .txt 文件放在合适的路径下，比如上文提及的途径。

然后为 HTML 标签添加合适的 id，比如：

<div>
	<p id="title">Error!</p> <!-- 可以写一些加载失败的提示 -->
</div>

然后在 javascript 中加入如下语句：

$("#title").load("./contents/showcase/title.txt");
// 对应填入筛选器名称和文件路径即可

然后我们需要做的就结束了。是不是非常简单？使用 jQuery 真是太方便辣！

用浏览器打开 index.html，你很可能会发现我们的目标没有达成。不出意外的话控制台会提供如下报错信息：

报错信息

不要着急。这是浏览器的隐私保护机制导致的。

由于你的代码申请访问位于本地的文件，所以被浏览器拒绝了（当然是否会出现这种情况由浏览器决定）。

解决方案非常简单，那就是根本不用解决。

因为您的所有文件都是要上传到站点上的，所以您大可以放心地把它上传到服务器，您站点的访问者们将会看到正常的效果，因为这不是对用户的信息进行的读取，而是对服务器端的文件进行的读取。

关注