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

ajax作用

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

使用ajax

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

1、环境配置

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

 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 JsonResponsedef 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_pathfrom booktest import viewsapp_name = 'booktest'   # 增加命名空间
urlpatterns = [path('login', views.login, name='login'),path('login_ajax', views.login_ajax, name='login_ajax'),
]

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


源码等资料获取方法

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/21082.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL主从复制

文章目录 介绍配置——前置条件配置——主库配置——从库测试读写分离案例背景Sharding-JDBC介绍入门案例 介绍 MySQL主从复制是一个异步的复制过程&#xff0c;底层是基于MySQL数据库自带的二进制日志功能。就是一台或多台MySQL数据库&#xff08;slave&#xff0c;即从库&…

23数字图像置乱技术(matlab程序)

1.简述 一、引言 所谓“置乱”&#xff0c;就是将图像的信息次序打乱&#xff0c;a像素移动到b像素位置上&#xff0c;b像素移动到c像素位置上&#xff0c;……&#xff0c;使其变换成杂乱无章难以辨认的图片。数字图像置乱技术属于加密技术&#xff0c;是指发送发借助数学或者…

6.EFLFK(EFLK+kafka)

文章目录 EFLFK(EFLKkafka)zookeeper概述Zookeeper 特点数据结构和工作场景选举机制&#xff08;重要&#xff09;总结部署Zookeeper kafka为什么用消息队列&#xff08;MQ&#xff09;中间件使用消息队列的好处消息队列模式消息队列总结&#xff1a;kafka概述Kafka特性Kafka架…

怎样优雅地增删查改(六):按任意字段关键字查询

文章目录 实现应用测试 实现 定义按任意字段关键字查询过滤器&#xff08;IKeywordOrientedFilter&#xff09;接口&#xff0c;查询实体列表Dto若实现该接口&#xff0c;将筛选指定的目标字段&#xff08;TargetFields&#xff09;包含指定的关键字&#xff08;Keyword&#…

基于springboot的地铁轨道交通运营系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

推荐Selenium 自动化测试实战

你将获得 深入 Selenium 源码、原理、封装、技巧&#xff1b; unittest、pytest、DDT、POM 迭代测试方法&#xff1b; 大型项目分布式测试解决方案&#xff1b; Jenkins 持续集成和交付。 演示地址&#xff1a;www.runruncode.com/portal/article/index/id/19451/cid/85.html 课…

Java设计模式-责任链(Chain of Responsibility)模式

介绍 Java责任链&#xff08;Chain of Responsibility&#xff09;设计模式是指很多处理对象构成一个链&#xff0c;链中前一个对象指向后一个对象。请求在链中传递&#xff0c;一个请求可以被一个或者多个对象处理。调用方&#xff08;即客户端&#xff09;不知道请求会被链中…

Node连接Mongodb数据库

1.初始化 npm init 2.安装mongoose npm i mongoose 3.导入mongoose const mongooserequire("mongoose") 4.连接mongodb服务 mongoose.connect("mongodb://127.0.0.1:27017/user") 说明&#xff1a;mongodb是协议,user是数据库&#xff0c;如果没有会自动创…

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(7 月 13 日论文合集)

文章目录 一、检测相关(8篇)1.1 Exposing the Fake: Effective Diffusion-Generated Images Detection1.2 Large Class Separation is not what you need for Relational Reasoning-based OOD Detection1.3 Visualization for Multivariate Gaussian Anomaly Detection in Imag…

matlab学习指南(1):matlab初步入门详细介绍

&#x1f305;*&#x1f539;** φ(゜▽゜*)♪ **&#x1f539;*&#x1f305; 欢迎来到馒头侠的博客&#xff0c;该类目主要讲数学建模的知识&#xff0c;大家一起学习&#xff0c;联系最后的横幅&#xff01; 喜欢的朋友可以关注下&#xff0c;私信下次更新不迷路&#xff0…

开源预训练框架 MMPRETRAIN官方文档(概览、环境安装与验证、基础用户指南)

MMPretrain是全新升级的开源预训练框架。它已着手提供多个强大的预训练骨干网并支持不同的预训练策略。MMPretrain 源自著名的开源项目 MMClassification 和MMSelfSup&#xff0c;并开发了许多令人兴奋的新功能。目前&#xff0c;预训练阶段对于视觉识别至关重要。凭借丰富而强…

IO线程NO

在处理问题&#xff1a; Got fatal error 1236 from master when reading data from binary log: Could not find first log file name in binary log index file 好翻译过来就是&#xff1a; 从二进制日志读取数据时&#xff0c;从主服务器收到致命错误 1236&#xff1a;“无法…