Javascript 和 jQuery 在 xampp 的 htdocs 文件夹中不起作用答案

【问题标题】：Javascript and jQuery not working in htdocs folders of xamppJavascript 和 jQuery 在 xampp 的 htdocs 文件夹中不起作用
【发布时间】：2015-09-16 12:22:00
【问题描述】：

所以我使用 HTML、CSS 和 Javascript 创建了一个网站并将其保存在桌面上。然后我使用 xampp 创建了一个本地服务器。我将此html文件放在xampp的htdocs文件夹中。该文件名为“foodlist.html”。每当我尝试在网络浏览器中以 localhost/foodlist.html 的形式打开此文件时，文件的 jQuery 和 Javascript 内容都无法显示。以下是部分代码：

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script id="javascript" src="file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js"></script>

每次使用 /localhost 在浏览器上打开文件时，如何使 javascript 和 jquery 代码正常工作？

【问题讨论】：

您需要将addnremove.js的路径转换为URL。您拥有的目录路径很可能不起作用。类似http://localhost/path/to/addnremove.js
另外，如果html和js文件在同一个目录下，那么应该可以在script标签的src属性中指定文件名。为您的项目创建一个适当的目录结构可能是一个好主意，其中包含 css/js 和图像等目录。这与适当的配置文件一起将使您的代码/项目在您将其移动到不同的服务器或移动到其他服务器时更具可移植性同一服务器上的不同位置。

标签： javascript php jquery html

【解决方案1】：

file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js 不是有效地址，出于安全原因，即使使用正确的地址，这种链接也不起作用..

为了让它工作，例如你的 XAMPP 目录是 "C:\xampp"，你可以将 "C:\Users\Akshat\Desktop\Project\JS-jQuery" 文件夹复制到 "C:\xampp\htdocs" 文件夹并以这种方式链接您的 "addnremove.js" 文件：

<script id="javascript" src="http://127.0.0.1/JS-jQuery/addnremove.js"></script>

您甚至可以将http://127.0.0.1/ 地址更改为http://localhost/。

【讨论】：

【解决方案2】：

看起来“file:///C|/Users/Akshat/Desktop/Project/JS-jQuery/addnremove.js”不是文件的正确链接。尝试将此文件与您的 html 相关，就像您对 main.css 所做的那样

【讨论】：

就像我说的，整个文件只是保存在桌面上的原始文件的副本。它在那里工作得非常好。
保持所有内容都与 html 相关是一个很好的做法，除非它位于外部 cdn 上。您应该将其移至 html 文件夹的同一目录或子目录
会试试的。谢谢