Django高级扩展之静态文件和ajax使用

这篇具有很好参考价值的文章主要介绍了Django高级扩展之静态文件和ajax使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

使用静态文件

创建静态文件目录

Settings.py配置

创建css文件

路由与视图

设置路由

视图

模板使用静态文件

调用css

调用js

调用图片

优化路径

加载标签

修改文件路径

修改图片路径

修改js路径

修改css路径

使用Ajax

应用场景

示例

路由

视图

模板

Javascript

总结


使用静态文件

css、js、图片、json文件、字体文件等

创建静态文件目录

一般在project下创建static文件夹。

在创建一个对应项目的myapp文件夹。

myapp中创建css、js、img文件夹。

如图:

Django高级扩展之静态文件和ajax使用

Settings.py配置

静态目录设置在工程目录下settings.py中,

修改STATIC_URL配置。

默认情况下是static,这个文件夹就是用来存放静态文件的。

Django会在应用程序根目录下查找static文件夹。

如图:

Django高级扩展之静态文件和ajax使用

在STATIC_URL下增加STATICFILES_DIRS配置,

内容如下:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

 

 

创建css文件

在static/myapp/css下创建style.css

设置h1标签字体颜色

* {
    margin: 0;
    padding:0;
}

h1 {
    color:red;
}

 

路由与视图

设置路由

# 静态调用

path('static_show', views.static_show, name='static_show'),

视图

在视图中设置显示模板

def static_show(request):
    """ 静态调用 """

    return render(request, 'myapp/show.html')

模板使用静态文件

调用css

在工程目录projects/templates/myapp/下创建模板测试调用css效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/static/myapp/style.css">
</head>
<body>
    <h1>我是标题 我最帅</h1>
</body>
</html>

调用js

添加jquery.js放入js目录

模板引入

<script src="/static/myapp/js/jquery.js"></script>

<script>

    $(function() {

        alert('我是弹窗')

    })

</script>

自己创建的js文件也是一样放置和引入。

效果:

Django高级扩展之静态文件和ajax使用

 

调用图片

找一张图片放入static/myapp/img目录中。

在模板中使用图片,如下:

<body>
    <h1>我是标题 我最帅</h1>
    <img src="/static/myapp/img/1.jpg" alt="">
</body>

优化路径

加载标签

使用一开始在settings.py中路径设置,首先需要加载static标签。

在模板最顶部添加以下代码:

{% load static %}

修改文件路径

静态文件调用的路径也需要修改,不在使用硬编码路径。

{% static %}标签用于生成静态文件的绝对路径。

修改图片路径

<body>
    <h1>我是标题 我最帅</h1>
    <img src="/static/myapp/img/1.jpg" alt="">
    <img src="{% static 'myapp/img/1.jpg' %}" alt="">
</body>

修改js路径

<script src="{% static 'myapp/js/jquery.js' %}"></script>

修改css路径

<link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">

主要解决如果静态文件路径改变后链接访问不到的问题。

注意:

img使用STATIC配置路径

js/css使用STATICFILE_DIR配置路径

如果暂时隐藏路径尝试配置效果,可能因浏览器缓存,出现误差效果。

使用Ajax

应用场景

需要动态生成,请求json数据。

示例

接下来将通过设置路由、视图和模型来进行具体使用的示例演示。

路由

# 使用ajax
path('ajax_show', views.ajax_show, name='ajax_show'),
path('ajax_use', views.ajax_use, name='ajax_use'),

视图

第一个视图方法显示模板页面;第二个方法接收到请求后,查询所有班级信息处理组装好数据后,调用jsonResponse处理数据为json并响应。

def ajax_show(request):

    render(request, 'myapp/show.html')


from django.http import JsonResponse
def ajax_use(request):

    gradess = Grades.objects.all()
    list = []
    for g in gradess:
        list.append([g.name, g.boy_num, g.girl_num])

    return JsonResponse({'list': list})

模板

显示模板,并在模板中设置按钮激活ajax请求后端接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
    <script src="{% static 'myapp/js/jquery.js' %}"></script>
    <script src="{% static 'myapp/js/main.js' %}"></script>
</head>
<body>
    <h1>我是标题 我最帅</h1>
    <h2>班级信息列表</h2>
    <button id="dian">请求班级信息</button>
</body>

Javascript

在static/myapp/js目录下创建main.js,

在这里设置ajax请求视图处理。

内容如下:

$(function(){
    $('#dian').click(function(){
        $.ajax({
            type:'get',
            url:'/myapp/ajax_use',
            dataType:'json',
            success:function(data, status) {
                console.log(status);
                console.log(msg);
            }
        })
    })
})

效果:

Django高级扩展之静态文件和ajax使用

 

总结

主要是Django框架静态资源配置、加载、路径修改及ajax如何应用。文章来源地址https://www.toymoban.com/news/detail-487489.html

到了这里,关于Django高级扩展之静态文件和ajax使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Django_静态资源配置和ajax(九)

    目录 一、静态资源配置  二、AJAX ajax作用 使用ajax 1、环境配置  2、创建html模板文件 3、编写视图函数并添加路由 4、运行django开发服务器进行验证 源码等资料获取方法 静态资源的相关配置都在项目目录下的 settings.py 文件中进行配置。配置参数如下:  注意:django查找静态

    2024年02月15日
    浏览(39)
  • django静态文件配置和使用

    一、首先需要了解的知识点是: 1、出于对效率和安全的考虑,django管理静态文件的功能仅限于在开发阶段的debug模式下使用,且需要在配置文件的INSTALLED_APPS中加入django.contrib.staticfiles(django工程创建后默认已经安装),网站正式部署上线后,静态文件是由Nginx等服务器管理。

    2024年02月02日
    浏览(47)
  • Django高级扩展之中间件

    中间件是Django请求/响应处理的钩子框架。它是一个轻量级的、低级的“插件”系统,用于全局改变Django的输入或输出。每个中间件组件负责实现一些特定的功能。例如,Django包含一个中间件组件AuthenticationMiddleware,它使用会话将用户与请求关联起来。 目录 方法介绍 __init

    2024年02月10日
    浏览(42)
  • Django高级扩展之Paginator分页实现

    在项目中很常见的一种功能,主要用于大量数据在一页显示过于冗长,分为一页显示多条数据,分隔为多页显示;并常与条件筛选结合使用。 目录 Paginator对象 创建对象 属性 方法 异常 Page对象 创建对象 属性 方法 Paginator与page关系 示例 路由 视图 模板 创建列表页面 设置分页

    2024年02月11日
    浏览(46)
  • Django高级扩展之tinymce富文本实现

      目录 安装 在站点中使用 注册富文本应用 添加配置文件 创建模型类 生成迁移文件 执行表迁移 配置站点 富文本不显示解决 修改主题 修改语言设置 自定义视图使用 设置路由 视图 创建模板 总结   安装过程如下:   配置settings.py文件 在settings.py底部添加,配置模式和宽高

    2024年02月10日
    浏览(41)
  • 使用gunicorn部署django项目时,发现静态文件加载失败问题,及部署

    from   django.contrib.staticfiles.urls  import   staticfiles_urlpatterns     urlpatterns  =   [    url( \\\'^admin/\\\' , admin.site.urls), ] urlpatterns  + =   staticfiles_urlpatterns() # 修改settings.py文件的:INSTALLED_APPS INSTALLED_APPS = [ ... \\\'gunicorn\\\', # 把gunicorn添加到apps中 ] 配置脚本文件启动django项目: # gunicorn_con

    2024年02月09日
    浏览(50)
  • Django静态文件&媒体文件&文件上传

    创建一个新项目 Day06DjangoPro01 每一个应用中都可以新建一个static和templates 如果想要额外再加一些静态文件路径,就再加一个STATICFILES_DIRS Apptemplatesindex.html 一般用 link rel=\\\"stylesheet\\\" href=\\\"{% static \\\'css/index.css\\\' %}\\\" Appstaticcssindex.css 根路由 Day06DjangoPro01urls.py Appviews.py 在项目根目录

    2024年02月10日
    浏览(107)
  • .net core中如何自定义静态文件目录、默认主页、和文件浏览目录?

    在.NET Core中,UseStaticFiles、UseDefaultFiles、UseDirectoryBrowser和UseFileServer中间件用于处理静态文件和目录浏览。下面我将为你提供一个简单的例子,演示它们的用法。 首先,确保你的项目已经安装了 Microsoft.AspNetCore.StaticFiles  NuGet包,因为这是这些中间件的依赖。 然后,打开  S

    2024年02月04日
    浏览(40)
  • Django后端开发——静态文件

    B站网课:点击蓝色字体跳转 或者复制网址在浏览器访问:https://www.bilibili.com/video/BV1vK4y1o7jH?p=13vd_source=597e21cf34ffcdce468ba00be2177e8a 如:图片、css、js、音频、视频 以下一行代码是手动添加的,指定了一个目录——‘static’,将在该目录下查找静态文件 模板中访问静态文件 - im

    2024年02月19日
    浏览(129)
  • django中使用ajax发送请求

    浏览器向网站发送请求时 是以URL和表单的形式提交的post 或get 请求,特点是:页面刷新 除此之外,也可以基于ajax向后台发送请求(异步) 依赖jQuery 编写ajax代码 1、在django 中使用ajax发送post请求,通过下面方法免除csrf_token 2、想要去数据库中获取数据时:可以是对象也可以

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包