如何使用 jQuery 建立 Django 网站答案

【问题标题】：How to set up Django website with jQuery如何使用 jQuery 建立 Django 网站
【发布时间】：2012-08-15 10:31:55
【问题描述】：

我不知道为什么，但我不知道如何在我的网站上激活 jQuery。所有做教程“在 Django 上启动 jQuery”的网站都开始使用 JQuery 已经在他们的网站上工作。无论如何，我没有下载它并将其放在我的文件夹中的某个地方，而是决定采用欺骗方式并使用谷歌的。因此，在我的基本页面中，我有以下代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>

一切都很好，直到我不得不添加一些库。如何设置我自己的 jQuery 以便它与我的模板一起使用？

【问题讨论】：

哪些库？为什么要使用旧版本的 jQuery？
@Daniil 我正在尝试安装 sorttable.js 库。我使用的是旧版本的 jQuery，因为我很困惑，尝试了很多东西，检查了其他网站的脚本，只是选择了我看到的第一个与我所拥有的不同的东西。
那些将在我之后来到这里的人确保在尝试将更改推送到生产之前运行：python manage.py collectstatic。这就是解决我的问题的方法。

标签： jquery django

【解决方案1】：

最后，它变得非常容易。这就是一个人所要做的：

首先，在文件夹 app 中创建一个名为 static 的文件夹：

mySite
---mytemplates
---mySite
---myApp
------static

然后从他们的网站here 下载 jQuery。您单击“下载”，它将带您到包含所有代码的不同页面。左键单击代码并选择“另存为...”。将其保存在static 文件夹中。

在您的settings.py 文件中，确保django.contrib.staticfiles 在INSTALLED_APPS 下（默认情况下它在那里）。

最后，在你的基本页面里面有

<script type="text/javascript" src="{{ STATIC_URL }} /static/jquery-1.8.0.js">
</script> 
//Make sure that the jQuery name is correct. With updates and different versions, 
//the number after 'jquery' will change

现在您可以在整个网站中使用 jQuery！（只要这些页面扩展了您的基本页面。如果没有，他们将需要在其 html 中包含上述代码。）

这对我在本地机器上工作时有用。我还没有尝试实际部署我的网站，所以我希望这仍然有效。

【讨论】：

是的，它会起作用的。但是，当您部署时，文件服务不是自动的。您必须运行manage.py collectstatic，它将静态文件放入您的STATIC_ROOT，然后您的服务器需要通过STATIC_URL URL 提供这些文件。
我相信自从提出这个问题以来约定已经改变，所以这里是关于静态文件的最新文档：docs.djangoproject.com/en/2.2/howto/static-files

【解决方案2】：

您也可以只pip install django-jquery，然后将jquery 放入INSTALLED_APPS。当然，您需要像往常一样运行collectstatic。 :)

这样你就可以把它放在你的requirements.txt文件中，如果你使用的话。

【讨论】：

【解决方案3】：

您也可以使用 python 包django-static-jquery。目前，它带有更新的 jquery 库。

pip install django-static-jquery=='version'。包和安装信息在这里https://pypi.python.org/pypi/django-static-jquery/

看起来另一个包django-jquery 有一段时间没有更新了。

【讨论】：

【解决方案4】：

我把我的 jquery 文件和 SaiyanGirl 放在同一个地方。

在我的设置中，我在 INSTALLED_APPS 中默认设置了这个：'django.contrib.staticfiles'，

在我的 html 页面顶部我有这个：

{% load static %}
<!DOCTYPE html>

我的头标签中有这个：
<script type="text/javascript" src="{% static 'jquery-3.5.0.js' %}"></script>

这是我测试它的方式（也在 head 标签中）：

<script type="text/javascript"> 
window.onload = function() {
   if (window.jQuery) {
      alert('jQuery is loaded');
   } else {
      alert('jQuery is not loaded');
</script>

【讨论】：