Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax、crsf、settings导入
1. ajax概述
- 使用Javascript语言与服务器进行异步交互，AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
- 特性：异步请求/ 局部刷新
2. ajax应用
代码示例：
login.html
{% load static %} <!-- 引入jquery文件的第二种方式 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!-- form方式提交数据 -->
<form action="" method="post">
{% csrf_token %}
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
<input type="submit">
</form> <!-- ajax方式提交数据 -->
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">提交</button>
<span class="error"></span> </body> <!-- 原jquery文件引入方式 -->
<script src="/static/js/jquery.js"></script>
<!-- 引入jquery文件的第二种方式 -->
<script src="{% static 'js/jquery.js' %}"></script> <!-- 引入jquery.cookie文件，通过jquer操作cookie -->
<script src="{% static 'js/jquery.cookie.js' %}"></script> <script>
$('#sub').click(function () {
var uname = $('#username').val();
var pwd = $('#password').val();
var csrf = '{{ csrf_token }}'; //不发送数据
$.ajax({
url:'{% url "login" %}',
type:'get',
success:function (res) {
console.log(res);
}
}) //发送数据
$.ajax({
url: '{% url "login" %}',
type: 'post',
data: {username: uname, password: pwd},
success: function (res) {
console.log(res);
if (res === '1') {
// $('.error').text('登录成功');
location.href = '/home/'; // http://127.0.0.1:8000/home/
} else {
$('.error').text('用户名密码错误!');
}
}
})
}) </script>
</html>
view.py
def login(request):
if request.method == 'GET':
return render(request,'login.html')
else:
uname = request.POST.get('username') # ajax中data设置的键
pwd = request.POST.get('password')
if uname == 'liu' and pwd == '123':
return HttpResponse('1')
else:
return HttpResponse('0') def home(request):
return render(request,'home.html')
3. ajax上传文件
代码示例：
upload.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>文件上传</h1> <!-- form表单上传 enctype="multipart/form-data" *** -->
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
头像: <input type="file" name="file">
<input type="submit">
</form> <!-- ajax上传 -->
{% csrf_token %} 用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<!-- 上传多个文件 -->
上传文件: <input type="file" multiple>
<!-- 上传单个文件 -->
上传文件: <input type="file"> <button id="sub">提交</button>
<span class="error"></span>
</body> <script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script> <script> $('#sub').click(function () { var formdata = new FormData(); var uname = $('#username').val();
var pwd = $('#password').val();
var file_obj = $('[type=file]')[0].files[0]; formdata.append('username', uname);
formdata.append('password', pwd);
formdata.append('file', file_obj); $.ajax({
url: '{% url "upload" %}',
type: 'post',
data: formdata, //必须写/告诉ajax不对data数据进行任何的加工处理
processData: false, //不处理数据
contentType: false, //不设置内容类型 headers: {
"X-CSRFToken": $.cookie('csrftoken'),
},
success: function (res) {
console.log(res);
if (res === '1') {
$('.error').text('上传成功');
} else {
$('.error').text('上传错误!');
}
}
})
}) </script>
</html>
view.py
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST)
print(request.FILES)
uname = request.POST.get('username')
pwd = request.POST.get('password') file_obj = request.FILES.get('file') # 文件对象---相当于是文档句柄
print(file_obj.name) # 文件名 with open(file_obj.name,'wb') as f:
# 按行将文件写入
for i in file_obj:
f.write(i)
# 按固定字节将文件写入，一次65531个字节
for chunk in file_obj.chunks():
f.write(chunk) return HttpResponse('ok')
4. jsonresponse应用
代码示例：
jsontest.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> 用户名: <input type="text" id="username">
密码: <input type="password" id="password"> <button id="sub">提交</button>
<span class="error"></span> </body> <script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script> <script> $('#sub').click(function () {
var uname = $('#username').val();
var pwd = $('#password').val(); $.ajax({
url: '{% url "jsontest" %}',
type: 'post',
data: {username: uname, password: pwd},
headers: {
"X-CSRFToken": $.cookie('csrftoken'),
// contentType:'application/json',
// 可以指定传输文件的类型，指定json后django无法解析
},
success: function (res) {
//方式一：
var res = JSON.parse(res); //-- 相当于python中json.loads()
console.log(res, typeof res); //将对象转换成字符串类型
//JSON.stringify() -- 相当于python中json.dumps //方式二、三
if (res.status === 1000) {
location.href = '/home/'; // http://127.0.0.1:8000/home/ } else {
$('.error').text(res.msg);
}
}
})
}) </script>
</html>
view.py
def jsontest(request):
"""
状态码;
1000 : 登录成功
1001 : 登录失败 :param request:
:return:
""" if request.method == 'GET':
return render(request,'jsontest.html')
else:
username = request.POST.get('username')
pwd = request.POST.get('password')
ret_data = {'status':None,'msg':None}
print('>>>>>',request.POST)
# 如果ajax传输指定的内容类型是json的话，django无法解析
# <QueryDict: {'{"username":"123","password":"123"}': ['']}>
if username == 'liu' and pwd == '123':
ret_data['status'] = 1000 # 状态码
ret_data['msg'] = '登录成功'
else:
ret_data['status'] = 1001 # 状态码
ret_data['msg'] = '登录失败' # 方式一：
ret_data_json = json.dumps(ret_data,ensure_ascii=False)
return HttpResponse(ret_data_json) # 方式二：
return HttpResponse(ret_data_json,content_type='application/json') # 方式三：/省略将字典转换成字符串和指定类型
return JsonResponse(ret_data) # 注意：当传输的数据ret_data是非字典数据类型的话JsonResponse不会序列化
return JsonResponse(ret_data,safe=False) # django没有json类型解释器 # django对内容类型解析伪代码
'''
ret = username=123&password=123 -- content-type:...urlencoded
if content-type == 'urlencoded':
res_list = ret.split('&')
for i in res_list:
k = i.split('=')
request.POST[k[0]] = k[1]
elif content-type=='multipart/form-data':
...
request.FILES elif content-type == 'application/json' '''
注意:
外部文件导入的方式来写js代码,那么js代码中不能写django的模板语法,因为html文件的加载顺序:url--视图--html模板渲染 --- return给浏览器 -- 浏览器渲染 --- srcipt的src --才去请求js文件 --那么这个js文件的代码此时才加载到你的html文件中 -- 就没有模板渲染的步骤了 -- 就没有办法替换对应的模板语法.
5. csrftoken /跨站请求伪造
csrf简述
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过HTTP请求将数据传送到服务器，从而盗取回话的cookie。盗取回话cookie之后，攻击者不仅可以获取用户的信息，还可以修改该cookie关联的账户信息。
解决csrf攻击
解决csrf攻击的最直接的办法就是生成一个随机的csrftoken值，保存在用户的页面上，每次请求都带着这个值过来完成校验。
form表单过csrf认证
<form action="" method="post">
{% csrf_token %}
<!-- form表单里面加上这个标签,模板渲染之后就是一个input标签 -->
type=hidden name=csrfmiddlewaretoken value='asdfasdfasdf'
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
<input type="submit">
</form>
ajax过csrf认证
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> {% csrf_token %} 用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">提交</button>
<span class="error"></span>
</body> <script src="{% static 'js/jquery.js' %}"></script>
//引入jquery.cookie.js文件通过jqery操作cookie
<script src="{% static 'js/jquery.cookie.js' %}"></script> <script>
$('#sub').click(function () { var uname = $('#username').val();
var pwd = $('#password').val();
//方式一：
var csrf = $('[name=csrfmiddlewaretoken]').val();
//方式二：
var csrf = '{{ csrf_token }}'; $.ajax({
url: '{% url "login" %}',
type: 'post',
//方式一、二：
data:{username:uname,password:pwd,csrfmiddlewaretoken:csrf}, //方式三：
data: {username: uname, password: pwd},
headers: {
"X-CSRFToken": $.cookie('csrftoken'),
},
//其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加
success: function (res) {
console.log(res);
if (res === '1') {
location.href = '/home/';
} else {
$('.error').text('用户名密码错误!');
}
}
})
}) </script>
</html>
6. django中setting引用
方式一：
from 项目名 import settings
# 只能从项目目录下的setting去查找，找不到会报错，没有此setting项目也能启动
方式二：
from django.conf import settings #推荐使用
# 先从本项目目录下的setting查找，找不到去global setting去查找 print(settings.BASE_DIR) #/static/
Django框架09 /ajax、crsf、settings导入的更多相关文章
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- Python之Flask和Django框架解决跨域问题，配合附加ajax和fetch等js代码
Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...
- Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）
12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...
- Django框架-模型层3/数据传输/Ajax
目录 一.orm查询优化 1.only与defer 2.select_related与prefatch_related 二.模型层choices参数 三.MTV与MVC模型 1.MVC 2.MTV 3 ...
- Django框架----Ajax
一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript Obie ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- Django框架全面讲解
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
随机推荐
- git clone 时注意点
环境: 在公司访问外网需要设置代理,另外,在公司局域网内架设了一台 GIT 服务器. 在使用 git clone 时,不能设置成 git 使用代理: git config --global http. ...
- Trouble and solution
Prevent the CTRL from rebooting in loop killall scm watch echo 1 > /dev/watchdog& Install Git ...
- Jupyter的搭建
在家实在无聊,伏案沉思良久,忽然灵机一动,何不写写Python?然而电脑上的软件早已人是物非,Pycharm已然不复存在.但是又不想装软件找激活码,于是,只好建个Jupyter先凑合一下. 1. 安装 ...
- Node.js环境安装
为其他使用先小小的接触这个环境,如不出意外,未来的一些时候抽时间会系统的学习element-ui, JavaScript, vue, node.js, 稍后也做个简易的ACE Editor体验一下 1 ...
- acm对拍程序 以及sublime text3的文件自动更新插件auto refresh
acm等算法比赛常用---对拍 以及sublime text3的文件自动更新插件auto refresh 对拍 对拍即程序自动对比正确程序的运行结果和错误程序的运行结果之间的差异 废话少说, 直接上操 ...
- JDBC——使用JDBC连接MySQL数据库
在JDBC--什么是JDBC一文中我们已经介绍了JDBC的基本原理. 这篇文章我们聊聊如何使用JDBC连接MySQL数据库. 一.基本操作 首先我们需要一个数据库和一张表: CREATE DATABA ...
- Linux下重新设置 MySQL 的密码
1.重置密码的第一步就是跳过MySQL的密码认证过程,方法如下: #vim /etc/my.cnf(注:windows下修改的是my.ini) 很多老铁,在开始时设置了 MySQL 的密码,后来一段时 ...
- 入门大数据---Sqoop基本使用
一.Sqoop 基本命令 1. 查看所有命令 # sqoop help 2. 查看某条命令的具体使用方法 # sqoop help 命令名 二.Sqoop 与 MySQL 1. 查询MySQL所有数据 ...
- (七) SpringBoot起飞之路-整合SpringSecurity（Mybatis、JDBC、内存）
兴趣的朋友可以去了解一下前五篇,你的赞就是对我最大的支持,感谢大家! (一) SpringBoot起飞之路-HelloWorld (二) SpringBoot起飞之路-入门原理分析 (三) Sprin ...
- SpringBoot--整合Lettuce redis
首先解释一下Lettuce客户端: Lettuce 和 Jedis 的都是连接Redis Server的客户端程序.Jedis在实现上是直连redis server,多线程环境下非线程安全,除非使用连 ...