开发者问题收集

外部文件的 JavaScript 无法加载

2012-03-16
2277
javascript python html django load

我遇到了一个 Javascript 问题，它已经困扰我好长一段时间了。我有一个名为 search.js 的外部文件，它与加载到的 .html 文件位于同一文件夹中。

我在 HTML 中用于加载 javascript 文件的代码片段是： 

<script type="text/javascript" src="search.js"></script>

从我读过的所有网站来看，我找不到代码存在问题。

此外，我知道 javascript 文件中的语法必须正确才能正常工作，因此这里是来自 search.js 的 Javascript 代码： 

$(document).ready(function(){
    $('#searchForm').submit(function(){
        var lookfor = $("#billSearched").val();
        alert(lookfor);
        var a = $(this).attr('action');
        alert(a);
        a = a.replace("__search_term__",lookfor);
        alert(a);
        window.location.href = a;
        return false;
    });
});

我在另一个项目中运行了此代码，它运行良好，我所做的只是更改了字段的名称，即 billSearched。

如果 Javascript 无法在我的页面中加载是出于其他原因，请留言或发表评论。

谢谢前进！<​​/p>

编辑

完整 html 代码: 

<html>
<head>
    <title>Bills</title>
    <script type="text/javascript" src="/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/search.js"></script>
    <link rel="stylesheet" href="style.css"> 
</head>
<body bgcolor="#0066CC" color="FFFFFF">
    <table>
        <tr>
            <td style="color:white"><b>Products</b></td>
            <td style="color:white">Price</td>
            <form method="POST" id="searchForm"  action="{% url ps.views.search searchTerm='__search_term__' %}">
                {% csrf_token %}
                <td><input type="text" id="billSearched"></td>
                <td><input type="submit" value="Search"></td>
            </form>
        </tr>
        {% for x in products %}
        <tr>
        <td style="color:white">{{ x.name }}</td>
        <td style="color:white">{{ x.price }}</td>
        </tr>
        {% endfor %}
    </tr>
</table>
</body>

3个回答

从标签和模板代码中，我得知您正在使用 Django。要了解您的问题，您必须了解 Django 视图相对于浏览器的工作方式，以及浏览器发出给定 URL 请求时会发生什么情况。

在 Django 端会发生什么情况：

当您请求 URL 时，将搜索基本 urls.py 文件以查找与您的 URL 匹配的模式。如果遇到模式，则将调用相应的 view 。
view 将执行其逻辑，并使用 template 将其响应呈现为 html 。

从浏览器的角度来看会发生什么情况

浏览器请求 URL 并收到响应，但它并不知道调用了视图，也不知道它在某处获取了模板。

这对您意味着什么

您的 search.js 文件位于模板旁边这一事实 完全不相关 ，因为您的浏览器 从未从此目录请求过任何文件 ，而是 view 在获取其 template 时请求了此文件。

实际上，您的浏览器对 search.js 的请求将由您的网络服务器转发到 Django ，并且（很可能）会导致 404 错误，除非 search.js 解析为 urls.py 中的视图。

如何使用它来解决您的问题

您需要从浏览器可以访问的目录中提供 search.js 文件。通常，这分三步完成：

  1. 配置您的网络服务器，使其能够自行处理以 /static/ 开头的任何路径（某种程度上，这意味着不将请求转发到 Django ）。
    在 Apache 中，您将使用以下规则： Alias /static/ /YOUR/STATIC/DIRECTORY/

  2. 配置 Django 的 settings.py 以使用 /YOUR/STATIC/DIR 作为 STATIC_ROOT ，并使用 /static/ 作为 STATIC_URL 。

  3. 将您的 search.js 文件放入您的 /YOUR/STATIC/DIR/

  4. 使用 src="/static/search.js 在您的 html 模板中引用您的文件。

最后一件事：如果您使用的是开发服务器，您可能需要确保您的 STATIC_URL 以服务器的完整路径开头，包括端口。（或者您可能遇到浏览器安全策略问题）。

一些补充：

您应该使用模板标签，这样您就不必在模板中写入 /static/ 。
您应该使用 manage.py collectstatic 自动将静态文件放入静态目录中。

最重要的是， 您应该调查 Django 的 MVC（或 MTV）模型是什么 。

Thomas Orozco
2012-03-16

以 / 为前缀的路径指向根目录 - 而不是当前文件夹。在这种情况下，您需要删除 / 前缀。

您的 HTML 文件位于 project/ps/templates/bill.html ，它链接了一个 JS 脚本 /search.js ，这意味着它在完全错误的位置查找文件。

例如，如果您在 HTML 中添加指向 /search.js 的链接，您可以看到它如何解析路径。

为了说明目的，请在您的桌面上创建一个 HTML 文件： 

<html>
<body>

<a href="/foobar.txt">Hello</a>
<a href="foobar.txt">World</a>

</body>
</html>

当您将鼠标悬停在链接上时，您会看到 Hello 解析为 file:///foobar.txt 并且 World 解析为您的桌面路径 - 在我的情况下为 file:///C:/Users/thm.ARC/Desktop/foobar.txt 。

thomthom
2012-03-16

为了解决这个问题，我不得不混合使用您的答案，但最终还是解决了。我不得不做以下修改：

  • 将“/static/”文件夹添加到 settings.py 文件中的 STATIC_URL 和 STATICFILES_DIRS

  • 使用以下命令按以下顺序导入 .js 文件（search.js 和 jQuery 源）： 

    <script type="text/javascript" src="/static/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/search.js"></script>

  • 并制作相应的文件结构，将“static”文件放在项目的根目录中。

    即。 Psroot：

  • psApp
  • 静态
  • 模板
  • 以及其余文件（settings.py、urls.py、manage.py 等）
Radu Gheorghiu
2012-03-19