django与Ajax
目录
Ajax简介
Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
ajax是异步提交的
Ajax 不是新的编程语言，而是一种使用现有标准的新方法。
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
举个实例
<!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>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">计算</button>
</p>
<script>
$('#b1').on('click', function () {
$.ajax({
url:'', // 数据提交的地址， 不写就是向当前页面提交，也可以写后缀，也可以写全称，与form表单参数action一样
type: 'post', // 提交方式，不写默认是get请求
data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的数据
success: function (data) { // 形参data就是异步提交之后后端返回的结果
$('#t3').val(data)
}
})
})
</script>
</body>
</html>
数据传输编码格式的解析
前后端交互式一个数据编码格式，针对不同的数据，后端会进行不同的处理
三种格式：
- urlencoded
- formdata
- application/json
form表单发送三种数据格式的情况
form表单post请求默认的编码格式是urlencoded
在浏览器-->检查-->network可以看到，我们form表单在提交数据的时候，有如下信息：
Request Headers： # 请求头
Content-Type:application/x-www-form-urlencoded; charset=UTF-8 # 数据编码格式-urlencoded
Form Data：# 携带的数据
d1=23&d2=23
在我们后端django中针对urlencoded数据，会自动解析并封装到request.POST方法中
form表单发送文件
Request Headers： # 请求头
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ # 数据编码格式，-form-data
Form Data：#针对form-data格式的数据，在浏览器是无法查看的
发送到后端django，文件对象会自动解析到 request.POST 和 request.FILES 中，前者记录文件名，后者记录对象。
form表单无法发送json格式的数据，要想实现，只能借助ajax
ajax发送数据的编码格式
默认的编码格式也是urlencoded
ajax传输json格式数据
有个参数，contentType，不写默认是urlencoded，
在view.py中
import json
def home(request):
if request.method == "POST":
print(request.body)
json_bytes = request.body
print(json.loads(json_bytes), type(json.loads(json_bytes)))
# 反序列化为python字典格式
return render(request, 'form_test.html')
# 结果：
'''
b'{"d1":"cwz","d2":"123"}'
{'d1': 'cwz', 'd2': '123'} <class 'dict'>
'''
form_test.html文件：
<!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>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
username: <input type="text" name="username" id="d1">
password: <input type="text" name="password" id="d2">
</form>
<button id="d3">点我发送json格式</button>
<script>
$('#d3').click(function () {
$.ajax({
url:'',
type:'post',
contentType:'application/json', //需要指定编码格式为json
data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 需要前端发送JSON字符串，JSON。stringify序列化即可。
success:function (data) {
alert(123)
}
})
})
</script>
</body>
</html>
ajax传json格式数据特点：
django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中 你可以手动处理 获取数据。拿到request.body是一个bytes类型数据
Ajax传输文件数据
需要借助内置对象，该对象既可以携带文件数据，同样也支持普通的键值对
注意几个参数：
-
data：formdata对象 -
contentType：false -
processData：false
<!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>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
username:<input type="text" name="username">
password:<input type="text" name="password">
myfile:<input type="file" name="myfile" id="d1">
<button id="d2">点我发送文件</button>
<script>
$('#d2').click(function () {
// 先生成一个内置对象
var MyFormData = new FormData();
// 先添加普通的键值
MyFormData.append('username', 'cwz');
MyFormData.append('password', '123');
//添加文件数据
MyFormData.append('myfile', $('#d1')[0].files[0]); // 将jquery对象转换成原生的js对象,利用原生js对象的方法 直接获取文件内容
$.ajax({
url: '',
type: 'post',
data: MyFormData,
contentType: false, //不用任何编码,因为formData对象自带编码 django能够识别该对象
processData: false, //告诉浏览器不要处理我的数据 直接发就行
success: function (data) {
}
})
})
</script>
</body>
</html>
django内置序列化模块
序列化的目的就是 将数据整合成一个大字典
导入这个模块：from django.core import serializers
比自己用json转方便多了
from app01 import models
from django.core import serializers
def yyy(request):
author_queryset = models.Author.objects.all()
res = serializers.serialize('json', author_queryset)
return HttpResponse(res)
效果：
[{
"model": "app01.author",
"pk": 1,
"fields": {
"name": "\u90b6\u98ce",
"email": "123@qq.com",
"author_detail": 1
}
}, {
"model": "app01.author",
"pk": 2,
"fields": {
"name": "\u5f0f\u5fae",
"email": "111@sin.com",
"author_detail": 2
}
}, {
"model": "app01.author",
"pk": 3,
"fields": {
"name": "\u65e0\u540d",
"email": "100@qq.com",
"author_detail": 3
}
}]
