Django_静态资源配置和ajax（九）
一、静态资源配置
静态资源的相关配置都在项目目录下的 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 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（九）的更多相关文章
- nginx代理配置 配置中的静态资源配置，root 和 alias的区别。启动注意事项
这篇主要内容是:nginx代理配置 配置中的静态资源配置,root 和 alias的区别.启动注意事项! 为什么会在window上配置了nginx呢?最近我们的项目是静态资源单独放在一个工程里面,后端 ...
- nginx代理配置 配置中的静态资源配置，root 和 alias的区别
这篇主要内容是:nginx代理配置 配置中的静态资源配置,root 和 alias的区别.启动注意事项! 为什么会在window上配置了nginx呢?最近我们的项目是静态资源单独放在一个工程里面,后端 ...
- spring boot mvc系列-静态资源配置与MappingHandler拦截器
静态资源配置 Spring Boot 默认将 /** 所有访问映射到以下目录: classpath:/static classpath:/public classpath:/resources cla ...
- Springboot项目静态资源配置
springboot项目的静态资源配置网上有好多,说的也很详细 我今天出错是自定义了一个filter,在shiro里配置的/**,自定义filter 所以一直报302
- Springboot系列（四）web静态资源配置详解
Springboot系列(四)web静态资源配置 往期精彩 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 SpringBoot系列(三)配 ...
- Spring 静态资源配置
ShineJaie 原创整理,转载请注明出处. 一.为何要配置静态资源 1.在配置 Spring 的时候,我们配置的拦截是"/",即任何文件都会经 Spring 拦截处理. 2.实 ...
- SpringMVC+Shiro不拦截静态资源配置
最近在弄SpringMVC与Shiro整合,发现如果将DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果DispatcherServlet改为拦截“/” ...
- Python学习---Django重点之静态资源配置
[官网静态文件介绍] https://docs.djangoproject.com/en/1.10/howto/static-files/ # settings.py 配置静态资源文件 # STATI ...
- Spring mvc 增加静态资源配置后访问不了注解配置的controller
spring mvc 增加静态资源访问配置. 例如: <!-- 静态资源映射 --> <mvc:resources location="/static/" map ...
随机推荐
- 利用Windbg分析Magicodes.IE一次错误编写导致内存剧增
由于这近一年时间一直忙于写书和工作,一直没有水文,但是近期有几位朋友使用我们的Magicodes.IE反馈在导出过程中内存暴涨...好吧,不管怎样,不能苦了我们朋友,接下来我们通过windbg来看一下 ...
- Identity Server 4 从入门到落地（十一）—— Docker部署
前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...
- Mysql资料 用户权限详解
目录 一.MySQL权限详解 设置MySQL用户资源限制 用户资源限制执行操作 二.MySQL权限级别介绍 MySQL权限级别 MySQL创建权限 MySQL删除与插入权限 MySQL修改与触发器权限 ...
- SpringBoot Redis 发布订阅模式 Pub/Sub
SpringBoot Redis 发布订阅模式 Pub/Sub 注意:redis的发布订阅模式不可以将消息进行持久化,订阅者发生网络断开.宕机等可能导致错过消息. Redis命令行下使用发布订阅 pu ...
- 在对话框中设置前置任务（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 在[任务信息]中的[前置任务]选项卡中设置,这是最古板的法子. 至于[任务信息]这个对话框从哪里去找,这--这么久了,不会 ...
- CF748A Santa Claus and a Place in a Class 题解
Content 圣诞老人坐在一个桌子被摆成 \(m\) 行 \(n\) 列的教室里.每个桌子有两个座位,每个位置从左往右都有编号,依次为 \(1,2,3,...,2\times n\times m\) ...
- java 常用类库：Object类和Objects类
1,Object类: Object类是所有的类,数组,枚举的父类,也就是说,JAVA中允许把任何的对象赋值给Object类(包括基础数据类型),当定义一个类的时候,没有使用extends关键字显示指定 ...
- JS获取url中query_str JavaScript RegExp 正则表达式基础详谈
面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblogs.com/EditPosts.aspx?opt=1 1.window.location.href(设置或获取整个 URL ...
- [WPF] 实现 WPF 的 Inner Shadow
在 WPF 中,我们通常用 DropShadow 做阴影效果,但都是做外阴影.内阴影(Inner Shadow)的话其实也不是不可以,就是有些曲折.这篇文章介绍几种做内引用的做法. 文章涉及到以下概念 ...
- SpringBoot整合logback日志框架
在resource下创建一个名称为 logback-spring.xml文件 <configuration> <!--日志文件夹存放的名称--> <contextName ...