Django与Ajax
什么是 JSON
JSON 是轻量级的文本数据交换格式，JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
合格的json对象(json只认双引的字符串格式)：
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]
不合格的json对象：
{ name: "张三", 'age': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
AJAX简介
AJAX（Asynchronous Javascript And XML）使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然传输的数据不只是XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
搜索引擎根据用户输入的关键字，自动提示检索关键字。比如注册时用户名查重。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
a标签href属性：GET请求
浏览器输入url：GET请求
form表单：GET/POST
ajax：GET/POST
ajax是js中的，但原生js操作ajax比较繁琐，为了提高效率直接使用jQuery封装版的ajax
示例
页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1">Ajax Test</button>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
$('#b1').click(function () {
$.ajax({
url:'',
type:'POST',
data:{'i1':$('#i1').val(),'i2':$('#i2').val()},
success:function (data) {
$('#i3').val(data)
}
})
})
</script>
</body>
</html>
views.py
def ajax_test(request):
if request.is_ajax == 'POST': # 判断是否是ajax请求
if request.method=='POST':
i1=request.POST.get('i1')
i2=request.POST.get('i2')
ret=int(i1)+int(i2)
return HttpResponse(ret)
return render(request,'ajax_test.html')
urls.py
from django.urls import path
from app01 import views
urlpatterns=[
path('ajax_test/',views.ajax_test),
]
jQuery实现AJAX
最基本的jQuery发送AJAX请求示例：
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<p><input type="text" class="user"><span class="hide" style="color: red">用户名已存在</span></p>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
//给input框绑定一个失去焦点的事件
$('.user').blur(function () {
//$.ajax为固定用法，表示启用ajax
$.ajax({
//url为提交数据的路径，不写就是向当前路径提交
url:'',
//type为请求的方法
type:'POST',
//data为提交给后端的数据
//data参数中的键值对，如果值不是字符串，需要将其转换成字符串。data:{"list": JSON.stringify([1, 2, 3])}
data:{'username':$(this).val()},
//success为回调函数，参数data即后端返回的数据
success:function (data) {
ret=JSON.parse(data);
if (ret['flag']){
$('p>span').removeClass('hide');
}
}
})
});
</script>
</body>
</html>
views.py：
def index(request):
if request.method=='POST':
ret={'flag':False}
username=request.POST.get('username')
if username=='JBY':
ret['flag']=True
import json
return HttpResponse(json.dumps(ret))
return render(request,'index.html')
JS实现AJAX(了解)
var b2 = document.getElementById("b2");
b2.onclick = function () {
// 原生JS
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=q1mi&password=123456");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
前后端传输数据编码格式
1.urlencoded
2.formdata
3.json
form表单
默认编码格式：urlencoded，数据格式：name=jason&pwd=123，django后端对urlencoded编码格式数据会自动解析并放到request.POST中供用户获取
formdata：传文件的编码格式，django后端对urlencoded编码格式数据会自动解析并放到request.POST中，对formdata编码格式数据会自动解析并放到request.FILES中
ajax
默认编码格式：urlencoded
ajax发送json格式数据
django后端针对json格式数据并不会自动解析，而是原封不动放在request.body中
<script>
$('#b1').on('click',function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'jason','password':123}),
contentType:'application/json', // 告诉后端数据格式为json
success:function (data) {
$('#i3').val(data)
}
})
}
</script>
def index(request):
if request.method == 'POST':
print(request.body)
# 后端去request.body中获取json格式数据手动处理
import json
jason_str = request.body.decode('utf-8')
ral_d = json.loads(jason_str)
print(ral_d,type(ral_d))
return render(request,'index.html')
ajax发送文件格式数据
django后端对urlencoded编码格式数据会自动解析并放到request.POST中，对formdata编码格式数据会自动解析并放到request.FILES中
<script>
$('#b1').on('click',function () {
// ajax传输文件，建议使用内置对象formdata，既可以传普通的键值对，也可以传文件
var formData = new FormData();
// 添加普通键值
formData.append('username','jason');
formData.append('password','123');
// 传文件，如何获取文件标签所存储的文件对象?
// 1.先用jQery查找到存储文件的input标签
// 2.将jQuery对象转为原生js对象
// 3.利用原生js对象的方法.files[0]获取到标签内部存储的文件对象
// 4.一定要指定两个参数都为false
formData.append('my_file',$('#d1')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:formData,
// ajax发送文件需要指定两个额外的参数
processData:false, // 告诉前端不要处理数据
contentType:false, // 不适用任何编码，因为formdata对象自带编码，django后端也能够识别formdata对象
success:function (data) {
$('#i3').val(data)
}
})
}
</script>
Django内置的serializers序列化
后端将数据对象传给前端格式为json格式的一个个字典，就可以用Django提供的序列化组件serializers（不常用）
from django.core import serializers
def user(request):
user_list=models.User.objects.all()
# 调用该模块下的方法，第一个参数是以什么样的方式序列化数据
res=serializers.serialize('json',user_list)
return HttpResponse(res)
SweetAlert插件
下载：https://github.com/lipis/bootstrap-sweetalert，依赖于bootstrap
使用：https://lipis.github.io/bootstrap-sweetalert，直接复制到<script>结合点击事件和ajax使用
只需要用到dist文件夹下的css和js文件：dist文件夹 -> sweetalert.css、sweetalert.js、sweetalert.min.js，拷贝dist文件夹到项目的static文件夹下：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'dist/sweetalert.min.js' %}"></script>
<style>
div.sweet-alert h2{
padding-top: 10px; /* 弹出的模态框中，title的中文会被图标遮盖一部分，可通过调整title的上外边距来解决 */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">数据展示</h2>
<table class="table-striped table table-hover table-bordered">
<thead>
<tr>
<th>序号</th>
<th>主键</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in user_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user.pk }}</td>
<td>{{ user.username }}</td>
<td>{{ user.age }}</td>
<td>{{ user.get_gender_display }}</td>
<td>
<button class="btn btn-primary btn-sm">编辑</button>
<button class="btn btn-danger btn-sm del" user_id="{{ user.pk }}">删除</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.del').click(function () {
// 获取当前标签对象
var $btnEle = $(this);
swal({
title: "确定要删吗?",
text: "要是删了就准备跑路吧!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "是的就要删!",
cancelButtonText: "算了算了!",
closeOnConfirm: false,
showLoaderOnConfirm: true, // 用动态的...展示等待后端处理请求
},
function(){
// 朝后端发送ajax请求
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btnEle.attr('user_id')},
success:function (data) { // 后端发字典过来，前端会自动转成js自定义对象
if (data.code === 100){
// 将被点击的删除按钮所在行删掉
$btnEle.parent().parent().remove();
swal("删掉了!", "准备跑路吧!", "success");
}else{
swal('未知错误!','有bug!','info')
}
}
});
});
})
</script>
</body>
</html>
views.py
from django.http import JsonResponse
import time
def userlist(request):
if request.is_ajax():
time.sleep(3)
# 针对ajax请求，后端通常返回一个字典
back_dic = {'code':100,'msg':''}
delete_id = request.POST.get('delete_id')
models.User.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '真的删除了!'
return JsonResponse(back_dic)
