Django 之 Ajax
1.Ajax Profile
- AJAX, English stands for Asynchronous Javascript And XML , Chinese meaning is: Asynchronous Javascript and XML . That the use of Javascript language to interact with the server asynchronous data transmission is XML , but now with more is json .
- Ajax advantages : without reloading the entire page, you can exchange data with the server and update parts of the page content. This feature is the feeling to the user request and response process is completed unknowingly .
- Two main characteristics :
- Partial refresh
- Asynchronous request: The client sends a request, the server without waiting for the end of the response, it can issue a second request.
- Two main characteristics :
2. The user login page example
html code:
{% load static %} <!DOCTYPE html> <html lang = 'en'> <head> <meta charset = "UTF-8"> <title>小骚浩</title> </head> <body> <h1> 登录页面 </h1> {% csrf_token %} #安全认证 <hr> 用户名:<input type = 'text' id = 'username'> 密码: <input type = "password" id = "password"> <button id = "sub"> 提交 </button> <span id = 'error' style = "color : red; font_size : 12px;"> </span> </body>js code:
<script src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> $('#sub').click(function(){ var username = $('#username').val(); var password = $('password').val(); var csrf = $('[name = "csrfmiddlewaretoken"]').val(); $.ajax({ url:'{% url 'login' %}', #请求路径，如果将js代码放到另一个文件中，url模块渲染不会被渲染，即系统会报错 type:'post', #请求方法 data:{'username':username,'password':password,'csrfmiddlewaretoken':csrf},#请求数据，不需要携带数据的请求，不需要写data参数 success:function(res){#res参数拿到的是响应数据 if (res !== 'ok'){ $('error').text("用户名或密码错误") }else{ location.href='/home/';#跳转到 home页面 } } }) }) </script> </html>views.py Code:
from django.http import JsonResponse from django.views import View from django.shortcuts import render,redirect,HttpResponse class Login(View): def get(self,request): return render(request,'login.html') def post(self,request): username = request.POST.get('username') password = request.POST.get('password') if username == "小骚浩" and password == "5201314": return HttpResponse('ok') else: return HttpResponse("不 ok")
3. ajax three ways certified by csrf_token
method one:
html code:
{% csrf_token %} 用户名: <input type="text" id="uname"> 密码: <input type="password" id="pwd"> <button id="sub">提交</button>js code:
$('#sub').click(function () { var uname = $('#uname').val(); var pwd = $('#pwd').val(); # 获取到{% csrf_token %}这个模板渲染语法渲染之后的input标签对应的值 var xxx = $('[name="csrfmiddlewaretoken"]').val(); $.ajax({ url:'{% url "login" %}', // 127.0.0.1:8000/login/ type:'post', # 给post请求提交的数据中添加上csrf_token认证所需要的键值对 data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':xxx}, success:function (res) { console.log('>>>>',res); if (res !== 'ok'){ $('#error').text('用户名或者密码有误!') }else { location.href='/home/'; } } }) })
Second way:
html code:
用户名: <input type="text" id="uname"> 密码: <input type="password" id="pwd"> <button id="sub">提交</button>js code:
$('#sub').click(function () { var uname = $('#uname').val(); var pwd = $('#pwd').val(); $.ajax({ url:'{% url "login" %}', // 127.0.0.1:8000/login/ type:'post', # data数据部分的csrf_token认证的键值对的值直接写{{ csrf_token }} ,经过模板渲染之后,它直接就是那个input标签的value值 data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':'{{ csrf_token }}'}, success:function (res) { console.log('>>>>',res); if (res !== 'ok'){ $('#error').text('用户名或者密码有误!') }else { location.href='/home/'; } } }) })
Three ways (ajax file upload example):
html code:
{% csrf_token %} 用户名:<input type="text" name="username"> 头像: <input type="file" name="file_obj"> <input type="submit" id="btn">js code:
$('#btn').click(function () { var formdata = new FormData(); #实例化FormData对象 var uname = $('[name="username"]').val(); // var file_obj = $('[name="file_obj"]').val(); //"C:\fakepath\0.jpg" 拿到的文件的本地路径 var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象 formdata.append('username',uname); formdata.append('file_obj',f_obj); formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val()); $.ajax({ url:'/upload/', type:'post', // data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()}, // 上传文件时的固定搭配 formdata processData:false, contentType:false, data:formdata, success:function (res) { console.log(res) } }) })
4. form form to upload files
html code: the enctype = "multipart / form-Data" attribute to write the file to upload tag form form, content-type header format request message carrying data >
<form action="" method="post" enctype="multipart/form-data"> {% csrf_token %} 用户名:<input type="text" name="username"> 头像: <input type="file" name="file_obj"> <input type="submit"> </form>views.py Code:
def upload(request): if request.method == 'GET': return render(request,'upload.html') else: print(request.POST) print(request.FILES) file_obj = request.FILES.get('file_obj') # f = open('xx','rb') # for i in f: # print(i) print(file_obj.name) with open(file_obj.name,'wb') as f: # for i in file_obj: # f.write(i) for i in file_obj.chunks(): #65536字节 f.write(i) return HttpResponse('ok')
5. JsonResponse
views Code:
from django.http import JsonResponse
def data(request):
if request.method == 'GET':
d1 = {'name':'chao','age':18}
# d1_str = json.dumps(d1)
# return HttpResponse(d1_str,content_type='application/json')
return JsonResponse(d1) #干了上面两步,序列化以及加content_type响应头这样,ajax在处理数据时会自动将json数据反序列化,那么如果jsonresponse的数据不是字典,需要加上safe参数
return JsonResponse(d1,safe=False)
success:function(res){
这个res就是反序列化之后的数据了,直接可以用
} 6.JSON sequence of time
views Code:
序列化时间
import json
from datetime import datetime
from datetime import date
#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
if isinstance(field,datetime):
return field.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(field,date):
return field.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)7.js magic box
html code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书籍展示</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'tankuang/dist/sweetalert.css' %}">
<style>
a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<h2>查看书籍中。。。</h2>
<div class="col-xs-8 col-xs-offset-2 " style="padding-top: 15px;">
<div>
<div class="panel-body">
<div class="row pull-left col-xs-1" style="padding-left: 0">
<a href="{% url 'addBook' %}"><button type="button" class="btn btn-primary">添加书籍
</button></a>
</div>
<div class="row pull-left col-xs-1 col-xs-offset-1" style="padding-left: 0">
<a href="{% url 'author' %}"><button type="button" class="btn btn-primary">展示作者
</button></a>
</div>
<div class="row pull-left col-xs-1 col-xs-offset-1" style="padding-left: 0">
<a href="{% url 'addAuthor' %}"><button type="button" class="btn btn-primary">添加作者
</button></a>
</div>
<div class="row pull-right col-xs-6" style="padding-right: 0">
<form action="" method="post">
{% csrf_token %}
<div class="row col-xs-6 pull-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入查询条件" name="info">
<span class="input-group-btn">
<a href="{% url 'book' %}" role="button" >
<button class="btn btn-success" type="submit">Go
</button></a>
</span>
</div>
</div>
<div class="btn-group pull-right" >
<select name="choose" id="choose" style="height: 34px;text-align: center;line-height: 34px;">
<option value="0">请选择以下内容</option>
<option value="1">作者</option>
<option value="2">书籍名称</option>
<option value="3">书籍价格</option>
<option value="4">出版社日期</option>
<option value="5">出版社</option>
<option value="6">出版城市</option>
</select>
</div>
</form>
</div>
</div>
<div>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>书籍作者</th>
<th>价格</th>
<th>出版日期</th>
<th>出版社</th>
<th>出版城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for i in ret %}
<tr class="active ">
<td class="first_child">{{ forloop.counter}}</td>
<td>{{ i.title}}</td>
<td>{% for j in i.authors.all %}
{{ j.name }}
{% if forloop.last %}
{% else %}
,
{% endif %}
{% endfor %}</td>
<td>{{ i.price}}</td>
<td>{{ i.publishDate|date:'Y-m-d' }}</td>
<td>{{ i.publishs.name }}</td>
<td>{{ i.publishs.city }}</td>
<td>
<a href="{% url 'Editbook' i.id %}" class="btn btn-warning btn-sm">编辑</a>
<button bookid = "{{ i.id }}" class="delete_btn btn btn-danger btn-sm">删除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>js code:
<script src="{% static 'jquery.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'tankuang/dist/sweetalert.min.js' %}"></script>
<script>
$(".delete_btn").on("click",function(){
var ths = $(this);
swal({
title:"想好了吗?",
text:"请陛下三思!",
type:"warning",
showCancelButton:true,
confirmButtonClass:"btn_danger",
confirmButtonText:"再见",
cancelButtonText:"取消",
closeOnConfirm:false
},
function(){
var deleteId = ths.attr('xxoo');
$.ajax({
url:'/delbook/',
type:'post',
data:{'id':deleteid},
success:function(data){
if(data.status === '1'){
swal("删除成功",'success');
ths.parent().parent().remove();
var tr_first_id = $('tr_first_child');
for (var i = 0;i < tr_first_id.length; i++){
$('tr .first_child').eq(i).text(i+1);
}
}else{
swal('删除失败','error');
}
}
})
})
})
</script>
</html>views.py Code:
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
def delbook(request):
ret_data = {'status':None,}
print(ret_data)
if request.method == "POST":
try:
book_id = request.POST.get('id')
models.Book.objects.filter(id=book_id).delete()
ret_data['status'] = '1'
except Exception:
ret_data['status'] = '2'
print(ret_data)
return JsonResponse(ret_data)urls.py Code:
from app01 import views
urlpatterns = [
url(r'^delbook/', views.delbook,name='delbook'),
]