11.Django之Ajax
Ajax介绍
Ajax(Asynchronous Javascript And XML) 翻译成中文就是'异步的Javascript和XML'就是使用Javascript语言进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,更多的是使用json数据)
Ajax不是新编程语言,而是使用现有标准的新方法.
Ajax最大的优点是不重新加载整个页面的情况下,可以跟服务器进行数据交换数据并更新部分网页内容
Ajax不需要任何浏览器插件,但是要允许Javascript在浏览器上执行
同步交互: 客户端发出一个请求后,需要等待服务器响应结束,就可以发出第二个请求
异步交互 :客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
最主要的功能就是浏览器页面局部刷新
HTML名字为ajax_dome.html
{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1">+ <input type="text" id="i2">= <input type="text" id="i3"> {% csrf_token %} <input type="button" value="AJAX提交" id="b1"> </body> <script src={% static 'js/jquery.js' %}></script> <script> $("#b1").on('click',function(){ $.ajax({ url:'/ajax_add/', type:'POST', data:{'i1':$("#i1").val(),'i2':$("#i2").val(),'csrfmiddlewaretoken':$('input[name =csrfmiddlewaretoken ]').val()}, success:function (data) { console.log(data); $("#i3").val(data); } }) }) </script> </html>
views.py内容
from django.shortcuts import render,HttpResponse,redirect from django.http import JsonResponse def ajax_dome(request): return render(request,'ajax_dome.html') def ajax_add(request): i1 = int(request.POST.get("i1")) i2 = int(request.POST.get("i2")) ret = i1+i2 print(ret) return JsonResponse(ret,safe=False)
urls.py内容
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^ajax_add/',views.ajax_add,name='ajax_add'), url(r'^ajax_dome/',views.ajax_dome,name='ajax_dome'), ]
登录验证作业
写一个登陆认证页面，登陆失败不刷新页面，提示用户登陆失败，登陆成功自动跳转到网站首页。
login.html
{% 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 id="msg" style="color: red;font-size: 12px"></span>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script>
$('#sub').click(function(){
var uname = $('#username').val();
var pwd = $('#password').val();
var scrf_token = $('input[name =csrfmiddlewaretoken ]').val();
$.ajax({
url:"{% url 'login' %}",
type:'post',
data:{'uname':uname,'pwd':pwd,'csrfmiddlewaretoken':scrf_token},
success:function(response){
console.log(response,typeof response);
if (response.status){
$('#msg').text('成功了');
location.href = response['home_url']
}
else {
$('#msg').text('失败了,检查一下输入的内容')
}
}
})
})
</script>
</html>
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>欢迎来到18期</h1>
</body>
</html>
models.py
from django.db import models
class UserInfo(models.Model):
id = models.AutoField(primary_key=True)
name = models.CharField(max_length=32)
password = models.CharField(max_length=12)
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/',views.login,name='login'),
url(r'^home/',views.home,name='home')
]
views.py
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from django.urls import reverse
from django.http import JsonResponse
def login(request):
if request.method == 'GET':
return render(request,'login.html')
else:
a = {'status':None,'home_url':None}
username = request.POST.get('uname')
password = request.POST.get('pwd')
print(username)
print(password)
ret = models.UserInfo.objects.filter(name=username,password=password)
if ret.exists():
a['status'] = True
a['home_url'] = reverse('home')
return JsonResponse(a)
else:
return HttpResponse('fail')
Ajax请求设置csrf_token
第一种方式
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送
$.ajax({
url: '/login/',
type: "POST",
data:{
'username':'alex',
'password':'123',
'csrfmiddlewaretoken':$("input[name='csrfmiddlewaretoken']").val()
},
success:function(data){
console.log(data);
}
})
第二种方式
通过获取返回的cookie中的字符串 放置在请求头中发送
需要引入jquery.cookie.js插件
$.ajax({
url: '/login/',
type: 'POST',
headers:{"X-CSRFToken":$.cookie('csrftoken')},
data: {'username':'alex','password':'123'},
success:function(data){
console.log(data)
}
})
自己写一个getCookie方法
function getCookie(name){
var cookieValue = null;
if (document.cookie && document.cookie !== ''){
var cookies = document.cookies.split(';');
for (var i = 0; i<cookies.length; i++){
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0,name.length +1)===(name +'=')){
cookieValue = decodeURIComponent(cokkie.substring(name.length + 1))
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken')
Ajax文件上传
请求头ContentType
1.application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了
POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 user=alex&age=21
2.multipart/form-data
POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="user" alex ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="alex.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
3.application/json
服务端消息主体是序列化后的 JSON 字符串
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^upload/',views.upload,name='upload')
]
uplaod.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="d1" style="margin-top: 100px;"></div>
<form class="form-horizontal" method="post" action="{% url 'upload' %}" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="用户名" name="username">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">头像</label>
<div class="col-sm-10">
<input type="file" id="inputPassword3" placeholder="文件" name="file_obj">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
</html>
第二种写法
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="d1" style="margin-top: 100px;"></div>
{% csrf_token %}
<div>用户名: <input type="text" name="username"></div>
<div>文件: <input type="file" name="file_obj"></div>
<button id="sub">上传</button>
</div>
</div>
</div>
</body>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$("sub").click(function () {
var name = $('input[name="username"]').val();
var file = $('input[type="file"]')[0].files[0];
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
var formdata = new FormData();
formdata.append('username',name);
formdata.append('file_obj',file);
formdata.append('csrfmiddlewaretoken',csrf);
$.ajax({
url:"{% url 'upload' %}",
type:'post',
data:formdata,
processData:false,
contentType:false,
// headers:{
// 'X-CSRFToken':$.cookie('csrf_token'),
// },
success:function(response){
}
})
})
</script>
</html>
views.py
from django.shortcuts import render,HttpResponse
import os
from upload import settings
# Create your views here.
def upload(request):
if request.method=='GET':
return render(request,'uplaod.html')
else:
username = request.POST.get('username')
file_obj = request.FILES.get('file_obj')
print(request.FILES)
print(username)
print(file_obj,type(file_obj))
file_name = file_obj.name
path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
with open(path,'wb') as f:
for i in file_obj:
f.write(i)
#for chunck in file_obj.chunks(): #一次性最大发送65516B大小数据
# f.write(i)
return HttpResponse('ok')
关于json
JSON是指JavaScript对象表示法(JavaScript Object Notation)
JSON是轻量级的文本数据交换格式
JSON独立于语言
json数据类型和python数据类型对比
python中的datetime等时间日期类型是不能进行json序列化的，因为json没有对应的格式
不合格的JSON格式
- 属性名必须使用双引号
- 不能使用十六进制值
- 不能使用undefined
- 不能使用函数和日期对象
普通字符串和json字符串进行序列化的时候的区别
import json # s = "{'name:'alex','age':18}" # ret = json.loads(s) #json.decoder.JSONDecodeError: Expecting property name enclosed in double quotes: line 1 column 2 (char 1) # print(ret) s = '{"name":"alex","age":18}' ret = json.loads(s) print(ret) #{'name': 'alex', 'age': 18}
json时间类型转换
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)
Sweetalert插件
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.css' %}">
<link rel="stylesheet" href="{% static 'plugins/bootstrap-sweetalert-master/lib/sweet-alert.less' %}">
</head>
<body>
<button class="btn btn-danger">删除</button>
</body>
<script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'plugins/bootstrap-sweetalert-master/dist/sweetalert.js' %}"></script>
<script>
$(".btn").on("click", function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "删除",
cancelButtonText: "取消",
closeOnConfirm: false
},
function () {
var deleteId = $(this).parent().parent().attr("data_id");
$.ajax({
url:"{% url 'selete_book' %}",
type: 'post',
data:{'id':deleteId},
success:function (data) {
if (data.status === 1){
swal("删除成功!", "你可以准备跑路了！", "success")
}
else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
}
);
})
</script>
</html>
