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

这篇具有很好参考价值的文章主要介绍了Django_静态资源配置和ajax(九)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、静态资源配置

 二、AJAX

ajax作用

使用ajax

1、环境配置

 2、创建html模板文件

3、编写视图函数并添加路由

4、运行django开发服务器进行验证

源码等资料获取方法


一、静态资源配置

静态资源的相关配置都在项目目录下的 settings.py 文件中进行配置。配置参数如下:

# 浏览器访问静态资源时的路径
STATIC_URL = '/static2/'
# 存放静态资源的文件路径
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'booktest/static'),

]

Django_静态资源配置和ajax(九),Django,django,ajax,okhttp,python,程序员,测试开发,编程

 注意:django查找静态文件是惰性查找,查找到第一个,就停止查找了。

 二、AJAX

ajax作用

通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。也就说可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

使用ajax

下面以登录为例子介绍ajax在django中是如何使用的

1、环境配置

django使用ajax时需要先在上面创建的static文件目录下新建个js目录,然后将 jquery 这个js文件放在js目录下

Django_静态资源配置和ajax(九),Django,django,ajax,okhttp,python,程序员,测试开发,编程

 2、创建html模板文件

在 templates 目录下创建 login.html文件,在文件中引入上面添加的js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax请求</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 在按钮上绑定click事件
            $("#sendAjax").click(function(){
                // 获取输入框中的用户名和密码
                var username = $('#username').val();
                var password = $('#password').val();

                // 使用ajax发送请求
                $.ajax({
                    // 'url': '/booktest/login_ajax',
                    // 使用django去除url硬编码
                    'url': '{% url "booktest:login_ajax" %}',
                    'type': 'post',
                    'dataType': 'json',
                    'data': {
                        'username': username,
                        'password': password
                    }
                }).success(function(data){      // 如果请求成功则执行,形参data为响应的数据
                    if( data.status_code==0 ){
                        alert('响应成功')
                    }else{
                        alert('响应错误')
                        return 
                    };
                    $('#message').html(data.data.message)
                    if( data.data.ret == 1){
                        $('#message').addClass('showColor')
                    }else{
                        $('#message').removeClass('showColor')
                        // 跳转到booktest首页
                        location.href = '/booktest/'
                    }
                })
            });
        });
    </script>
    <style>
        .showColor{
            color: red;
        }
    </style>
</head>
<body>
    <div>用户名:<input type="text" name="username" id="username"></div>
    <div>密码:<input type="text" name="password" id="password"></div>  
    <div><input type="button" value="登录" id="sendAjax"></div>
    <div id="message"></div>
</body>
</html>

3、编写视图函数并添加路由

在views.py文件中编写视图函数,代码如下:

from django.shortcuts import render
from django.http import JsonResponse


def login(request):
    """ 显示登录界面 """
    return render(request, "booktest/login.html")


def login_ajax(request):
    """ 响应的数据 """
    # 获取POST请求参数
    username = request.POST.get('username')
    password = request.POST.get('password')
    if username == 'admin' and password == 'admin':
        data = {
            'status_code': 0,
            'data': {
                'ret': 0,
                'message': '登录成功'
                }
            }
        # 注意:因为ajax是通过后台与服务器进行数据交换的,如果使用ajax调用的函数的响应数据是指向或重定向一个界面,浏览器是不会刷新界面的!只能通过前端实现界面跳转
        # return render(request, 'booktest/index.html')
    else:
        data = {
            'status_code': 0,
            'data': {
                'ret': 1,
                'message': '用户或密码错误'
            }
        }
    # 返回json格式数据
    return JsonResponse(data)

在urls.py文件中配置路由:

from django.urls import path
from django.urls import re_path

from booktest import views

app_name = 'booktest'   # 增加命名空间
urlpatterns = [
    path('login', views.login, name='login'),
    path('login_ajax', views.login_ajax, name='login_ajax'),
]

4、运行django开发服务器进行验证

Django_静态资源配置和ajax(九),Django,django,ajax,okhttp,python,程序员,测试开发,编程


源码等资料获取方法

Django_静态资源配置和ajax(九),Django,django,ajax,okhttp,python,程序员,测试开发,编程

各位想获取源码的朋友请点赞 + 评论 + 收藏,三连!

三连之后我会在评论区挨个私信发给你们~

 文章来源地址https://www.toymoban.com/news/detail-553937.html

到了这里,关于Django_静态资源配置和ajax(九)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • tomcat配置静态资源访问(亲测ok版)

    最近偶尔接收一个ssm+jsp的项目,因为之前的文件上传都是存在项目里,用tomcat启动的话,往往不能实时加载图片等资源 做一个用户头像切换功能,上传了文件后(上传是用的layui的组件,上传无问题)。但是加载的时候,必须重新启动项目才可以。我靠,这怎么行? 这里的

    2024年02月10日
    浏览(43)
  • 配置Nginx作为静态资源服务器及安全策略

    上一篇文章写了Nginx负载均衡实现方案详解,有同学私信我说能不能写一篇关于nginx代理静态资源的文章。当然没问题,这篇文章就分享一下如何配置Nginx作为静态资源服务器同时也分享一些常用的安全策略配置。 静态资源指的是在服务器端存储的不会变化的文件,这些文件的

    2024年02月21日
    浏览(50)
  • idea中没有tomcat,tomcat配置,以及访问静态资源

    1.点击add configurations 2.如下所示 选择tomcat server 3. 配置tomcat 正常情况下 , URL为http://localhost:8080/,Application context就是:/ URL为http://localhost:8080/XXX,Application context就是:/XXX Server中的URL: tomcat启动后,自动跳转的url Deployment中的Application context: 项目实际可以访问到的url 如果是

    2024年01月18日
    浏览(48)
  • Django高级扩展之静态文件和ajax使用

    目录 使用静态文件 创建静态文件目录 Settings.py配置 创建css文件 路由与视图 设置路由 视图 模板使用静态文件 调用css 调用js 调用图片 优化路径 加载标签 修改文件路径 修改图片路径 修改js路径 修改css路径 使用Ajax 应用场景 示例 路由 视图 模板 Javascript 总结 css、js、图片、

    2024年02月09日
    浏览(52)
  • Nginx 配置一级和二级证书以及作为静态资源服务器

    卷挂载中的 ssl 证书替换为自己 ssl 证书的位置。 关于 nginx *.conf 配置文件不过多描述! 在同一个 default.conf 文件中写 server 就可以。 只作为简单静态资源服务器!

    2024年01月18日
    浏览(54)
  • 10SpringBoot 静态资源访问 11Springboot的默认配置文件和外部配置文件及加载顺序

            做web开发的时候,我们往往会有很多静态资源,如html、图片、css等。那如何向前端返回静态资源呢?        以前做过web开发的同学应该知道,我们以前创建的web工程下面会有一个webapp的目录,我们只要把静态资源放在该目录下就可以直接访问。        但是,基

    2023年04月08日
    浏览(59)
  • 03Nginx的静态资源部署,反向代理,负载均衡,动静分离的配置

    部署静态资源 Nginx相对于Tomcat处理静态资源的能力更加高效,所以在生产环境下一般都会将Nginx可以作为静态web服务器来部署静态资源 静态资源: 在服务端真实存在并且能够直接展示的一些html页面、css文件、js文件、图片、视频等资源文件 将静态资源部署到Nginx非常简单,只需要

    2024年02月04日
    浏览(44)
  • SpringBoot -05 SpringBoot web相关配置(静态资源访问、统一异常处理、文件上传、拦截器、统一跨域请求处理)

    小总结 SpringBoot是一个基于Spring的工具集,去帮我们完成了大量的配置。在SpringBoot中有一个约定大于配置的概念,就是他把我们很多第三方框架帮我们写好了,而且把我们整个第三方框架所需要的依赖全都通过起步依赖加进去了。开发中只需要加入起步依赖就可以实现某个场

    2024年02月01日
    浏览(45)
  • 分布式 - 服务器Nginx:基础系列之Nginx静态资源配置优化sendfile | tcp_nopush | tcp_nodelay

    1. sendfile 指令 请求静态资源的过程:客户端通过网络接口向服务端发送请求,操作系统将这些客户端的请求传递给服务器端应用程序,服务器端应用程序会处理这些请求,请求处理完成以后,操作系统还需要将处理得到的结果通过网络适配器传递回去。 sendfile 指令是用于将

    2024年02月09日
    浏览(38)
  • Django 加载静态资源及<!DOCTYPE html>标红解决办法

    1.文件夹位置: 用于开发者存放HTML页面。 本文件夹位置建立在app01文件夹目录下 -- 新建templates文件夹 -- 并在文件夹下创建html文件。 该文件的文件名与上述链接指向的html文件名称相同。 2.要点: 优先去项目的根目录的templates中寻找(这个需要提前配置),不配置则无效。

    2023年04月08日
    浏览(58)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包