django ajax应用
ajax:
什么是ajax，有什么作用：
以前我们在页面向后台提交数据的时候都是使用from表单，这样的提交会在提交的时候将整个页面全部刷新，如果你在填写表单的时候提交之后发现某个数据不对，但是你已提交的就会将这个页面刷新，想要改就只能重新来过，这样用户的体验感是不好的；所以就有了ajax，它就能帮助开发人员解决这个问题；
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
# 特点:异步请求和局部刷新
1. 局部刷新： 即不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
2. AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
ajax的应用：
{% load static %} # 导入文件路径，固定写法不能更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body> <div class="container" style="width: 500px;">
<div class="form-group">
<label class="col-sm-2 control-label">账号</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="账号" name="account" id="name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="密码" name="password" id="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="but">提交</button>
<span id="error"></span>
</div>
</div>
</div>
</body>
<script src="{% static 'jquery.js' %}"></script>
# 导入本地的文件时直接写一个static后边加加上文件名就行
<script>
# 触发器，当你鼠标点击提交按钮时触发，执行下边的代码
$('#but').click(function () {
# 获取输入框需要提交到后台的数据
var account = $('#name').val();
var password = $('#pwd').val();
# 下边就是ajax的写法，
# 通过ajax将拿到的数据发送给后端
$.ajax({
# 下边是发送请求的路径，
url:'{% url 'login' %}', # login是urls.py文件中相关路径别名
# 发送请求的类型，post请求
type:'post',
# 下边是你需要提交到后端的数据，写成一个字典形式
data:{account:account,password:password},
# 下边是一个响应函数 ret是从后端返回的数据
success:function (ret) {
if (ret === '1'){ # 对后端返回的值进行比较是不是相同
# 判断成功后使用location方法将当前页面跳转到指定的页面/home/
location.href='/home/'
}
else{
$('#error').text('用户名或者密码错误！')
}
}
})
})
</script>
</html>
后端如何接收数据并做处理：
def login(request):
if request.method == 'GET':
return render(request,'login.html')
# 从ajax返回的数据是一个字典的形式，所以直接可以get去相应的值
name = request.POST.get('name')
pwd = request.POST.get('password')
# 对相应的数据进行比较
if name == 'adrian' and pwd == '123':
# 成功之后返回一个值
return HttpResponse('1')
# 失败之后返回一个值
return HttpResponse('0')
csrftoken
详述CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过HTTP请求江数据传送到服务器，从而盗取回话的cookie。盗取回话cookie之后，攻击者不仅可以获取用户的信息，还可以修改该cookie关联的账户信息。
所以解决csrf攻击的最直接的办法就是生成一个随机的csrftoken值，保存在用户的页面上，每次请求都带着这个值过来完成校验。
ajax过csrf认证
方式1：# 这个方式是将{% csrf_token %}写在前端的页面中，
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "chao",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
# 使用jQuery从页面中取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
}) 方式2：# 写在ajax中在服务器向浏览器发送页面的时候进行模板渲染的时候就进行替换了
$.ajax({
data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
方式3
#这个方式是使用jquery来操作cookie值：
首先需要导入一个文件包：这个包是专门用来操作cookie的 下载网址 https://plugins.jquery.com/cookie/
<script type="text/javascript" src="js/jquery.cookie.js"></script>
$.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')},
#其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加 }) jquery操作cookie: https://www.cnblogs.com/clschao/articles/10480029.html
form表单文件上传：
需要注意的是: enctype
<form action="" method="post" enctype="multipart/form-data">
# 注意如果用form表单上传文件时，需要设置上传的格式 enctype="multipart/form-data" 这种form_data的格式一般是把大数据一段一段隔开的
{% csrf_token %}
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
头像: <input type="file" name="file"> # 获取文件
<input type="submit">
</form> views.py
def upload(request):
if request.method == 'GET':
print(settings.BASE_DIR) #/static/
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)
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse('ok')
ajax文件上传：
参数：
1. processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
,最后得到一个［object，Object］形式的结果。 2. contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
比如contentType:"application/json"，即向服务器发送一个json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
views.py: json.loads(request.body.decode("utf8")) 3. traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
traditional为false会对数据进行深层次迭代；
操作：
$('#but').click(function () { var formdata = new FormData();
{#由于ajax不能像form表单那样设置上传文件的格式，所以就需要借助FormData#}
{# 首先创建一个formdata对象#}
var files = $('[type=file]')[0].files[0];
{#首先需要获取到文件信息，需要使用DOM的方法files来获取#}
formdata.append('file',files);
{#将需要的文件添加到这个对象中#} $.ajax({
url:'{% url 'input' %}',
type:'post',
data:formdata,
{#上传数据时直接写这个对象就行#}
processData:false, {#不处理数据#}
contentType:false, {#不设置内容类型#}
headers:{"X-CSRFToken":$.cookie('csrftoken')},
success:function (ret) {
{#逻辑代码#}
}
})
})
django ajax应用的更多相关文章
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- 关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- python学习-- Django Ajax CSRF 认证
使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- Django——Ajax
1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- Django ajax提交 登录
一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...
- django ajax报错解决：You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set.
Django版本号:1.11.15 django中ajax请求报错:You called this URL via POST, but the URL doesn't end in a slash a ...
随机推荐
- 弱肉强食——《哆啦A梦：大雄的新恐龙》观后感
观看大雄的新恐龙不是在电影院观看的,由于时间的问题无法去电影院观看,是在家通过梦蓝字幕组翻译好的观看的,这个翻译好的视频已经由于版权原因没有发布了. 故事的开始与以往的情节十分相似:大雄因为不想被胖虎 ...
- C# 数据结构与算法 操作系统原理 计算机网络原理 数据库开发学习
https://www.cnblogs.com/edisonchou/p/3843287.html PDF https://files.cnblogs.com/files/netlock/%E6%95 ...
- MySQL5.7.26安装及启动报错解决
一.安装依赖包 [root@db01 ~]# yum install -y lrzsz [文件上传/下载] [root@db01 ~]# yum -y install xfsprogs [安装磁盘格式 ...
- feig中调用其他微服务接口无反应
1.调用微服务时get请求接口中不能使用@RequestBody注解,不然接口调用无反应.post接口中可以使用@RequestBody注解
- 基于数据库、redis和zookeeper实现的分布式锁
基于数据库 基于数据库(MySQL)的方案,一般分为3类:基于表记录.乐观锁和悲观锁 基于表记录 用表主键或表字段加唯一性索引便可实现,如下: CREATE TABLE `database_lock` ...
- springboot容器启动顺序之@Configuration ContextRefreshedEvent事件初始化 ApplicationRunner
笔者最近遇到一个问题 我们根据自己业务需要 需要首次启动springboot项目时 把数据库数据同步至本地缓存(比如ehcache)但有一个要求 在缓存未载入成功 不允许有流量打入 一开始我们使用 ...
- Adnc简介
Adnc是一个轻量级的.Net Core微服务(microservices)快速开发框架,同时也可以应用于单体架构系统的开发.框架基于JWT认证授权,包含基础的后台管理功能,代码简洁.易上手.学习成本 ...
- .NET 云原生架构师训练营（模块二 基础巩固 MongoDB API实现）--学习笔记
2.5.7 MongoDB -- API实现 问题查询单个实现 问题查询列表实现 问题跨集合查询实现 问题创建实现 问题更新实现 问题回答实现 问题评论实现 问题投票实现 回答实现 QuestionC ...
- [ABP教程]第七章 作者:数据库集成
Web开发教程7 作者:数据库集成 关于此教程 在这个教程系列中,你将要构建一个基于ABP框架的应用程序 Acme.BookStore.这个应用程序被用于甘丽图书页面机器作者.它将用以下开发技术: E ...
- 【JavaWeb】i18n 国际化
i18n 国际化 什么是 i18n 国际化(Internationalization)指的是同一个网站可以支持多种不同的语言,以方便不同国家,不同语种的用户访问. 希望相同的一个网站,不同人访问的时候 ...