【问题标题】:Javascript from external file not loading来自外部文件的 Javascript 未加载
【发布时间】:2012-03-19 19:35:01
【问题描述】:

我有一个 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 无法在我的页面中加载,请留言或评论。

提前致谢!

编辑

完整的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>

【问题讨论】:

  • 您看到了什么错误?控制台中有任何东西吗?您是否在该页面上加载 jquery,并在 search.js 之前加载它?
  • 链接是否正确?当您使用 net 选项卡查看 JS 文件时,它是否显示为 200?控制台有错误吗?
  • 有一个活生生的例子的链接?导致您的问题的原因可能有很多。你打错了脚本的位置。您在某处有一个影响相对 URL 的 BASE 标记,或者您在 search.js 脚本之后加载了 jQuery……任何东西。我们需要更多信息。
  • 你能在$('#searchForm')之前加上alert('loaded');吗?
  • 在您的 HTML 示例中,您的搜索脚本以 / /search.js 为前缀,而您的 jQuery 脚本则没有。这是正确的吗?

标签: javascript python html django load


【解决方案1】:

根据标签和您的模板代码,我推测您正在使用 Django。要了解您的问题,您必须了解 Django 视图相对于您的浏览器是如何工作的,以及当您的浏览器发出对给定 url 的请求时会发生什么。

Django 方面发生了什么:

当您请求一个 url 时会发生什么,您的基本 urls.py 文件将被搜索以查找与您的 url 匹配的模式。如果遇到模式,则会调用对应的view
view 将执行其逻辑,并将使用template 将其响应呈现为html

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

浏览器请求了一个 url,并收到了一个响应,它不知道视图被调用,并且它在某个地方获取了一个模板。

这对你意味着什么

search.js 文件位于模板旁边这一事实完全不相关,因为您的浏览器从未请求此目录中的任何文件,它是 @987654328 @ 确实如此,当它获取它的template 时。

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

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

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

  1. 配置您的网络服务器,以便它自己服务以/static/ 开头的任何路径(不知何故,这意味着不将请求转发到Django)。
    在 Apache 中,您将使用以下规则:Alias /static/ /YOUR/STATIC/DIRECTORY/

  2. Djangosettings.py 配置为将/YOUR/STATIC/DIR 用作STATIC_ROOT,并将/static/ 用作STATIC_URL

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

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

最后一件事:如果您使用的是开发服务器,您可能需要确保您的STATIC_URL 以服务器的完整路径开头,包括端口。 (或者您可能对浏览器安全策略有疑问)。

一些补充:

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

最重要的是,你应该研究一下 Django 的 MVC(或 MTV)模型是什么

【讨论】:

  • 那么STATIC_ROOT 和网络服务器配置呢?
【解决方案2】:

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

您在project/ps/templates/bill.html 的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.txtWorld 解析为您的桌面路径 - 在我的情况下为 file:///C:/Users/thm.ARC/Desktop/foobar.txt

【讨论】:

  • 好的,我在这两种情况下都删除了/,现在我直接加载它们 src="search.js",使用 jQuery 是一样的,但没有结果。
  • 如果你使用绝对路径?
  • 我已经在我新安装的带有 firebug 插件的 Chrome 中进行了尝试,我看到 Chrome 找到了文件、jQuery 和 search.js,但它显示“访问受限 URI 被拒绝。”跨度>
  • 或者,如果你向脚本添加一个链接——如果你点击它——它会加载脚本还是得到 404?如果您确实收到 404,您的错误日志会说什么?请求的 URL 是什么?它与脚本的 URL 相比如何?
  • 是的,我得到一个 404。错误日志显示:找不到页面 (404) 请求方法:GET 请求 URL:127.0.0.1:8000/search.js 使用 psdemo.urls 中定义的 URLconf,Django 尝试了这些 URL 模式,按以下顺序: ^$ [name='bills'] ^search/(?P\w*) [name='search'] 当前 URL search.js 与其中任何一个都不匹配。
【解决方案3】:

为了解决这个问题,我不得不混合你的答案,但最终它得到了解决。我必须进行以下修改:

  • 将“/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>
    
  • 并制作相应的文件结构,将“静态”文件放在项目的根目录下。

    即 psroot:

  • psApp
  • 静态
  • 模板
  • 以及其余文件(settings.py、urls.py、manage.py 等)

【讨论】:

    猜你喜欢
    • 2013-05-30
    • 2011-01-20
    • 1970-01-01
    • 1970-01-01
    • 2015-06-06
    • 1970-01-01
    • 1970-01-01
    • 2010-09-30
    • 1970-01-01
    相关资源
    最近更新 更多