Django与Ajax
目录
一、什么是Ajax
二、Ajax引入
案例
小结
三、前后端数据传输的编码格式(contentType)
【1】form表单
【2】编码格式
【3】Ajax
【4】代码演示
四、Ajax发送JSON格式数据
【1】引入
【2】后端
【3】总结
五、Ajax提交文件数据
【发送文件数据的格式】
【结论】
六、Ajax结合layer弹窗实现二次确认
七、批量插入数据
【1】项目需求
【2】解决方案
一、什么是Ajax
- AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
- 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，现在更多使用json数据）。
-
AJAX 不是新的编程语言，而是一种使用现有标准的新方法
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
- 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
- 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
- 同步交互：
场景：
优点：
- 异步提交
- 局部刷新
二、Ajax引入
案例
def ab_ajax(request):
# if request.is_ajax():
if request.method=='POST':
'''接收ajax提交过来的数据'''
#
print(request.POST)
# d1 = request.POST.get('inp1') # str
# d2 = request.POST.get('inp2') # str
# d3 = int(d1) + int(d2)
# 序列化
import json
# json.dumps(d3)
user_dict = {"username":"kevin", "password":123}
# return HttpResponse(json.dumps(d3))
return HttpResponse(json.dumps(user_dict))
# return JsonResponse(user_dict)
return render(request, 'ab_ajax.html') 小结
(1)基本语法
(2)注意
- 针对后端如果是用 HttpResponse 返回的数据，回调函数不会自动帮我们反序列化
- 针对后端如果是用 JsonResponse 返回的数据，回调函数会自动帮我们反序列化
(3)HttpResponse 解决方式
- 后端先进行序列化，再返回数据给前端
- 前端加参数进行反序列化
三、前后端数据传输的编码格式(contentType)
- 我们只研究post请求方式的编码格式
- get请求方式没有编码格式且没有请求头
- 其参数直接在url地址的后面拼接着(index?useranme=&password=)
- 可以朝后端发送post请求的方式
- form请求
- ajax请求
【1】form表单
-
前后端传输数据的格式
-
urlencoded
-
formdata
-
json
-
【2】编码格式
- form表单默认的编码格式是urlencoded
- 通过查看请求头中的 Content-Type 参数
text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:27
Content-Type:application/x-www-form-urlencoded- 携带数据格式
username=22222&password=99- Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中
- 如果编码格式改为 formdata ，那么针对普通的键值对还是解析到 request.POST 中，而其他文件格式的数据解析到 request.FILES 中
- form表单无法发送json格式数据
【3】Ajax
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:31
Content-Type:application/x-www-form-urlencoded; charset=UTF-8- 默认的编码格式是 urlencoded
- 数据格式
username=kevin&password=1314521- Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中 --->
username=kevin&password=1314521
【4】代码演示
- 后端
def index(request):
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request, 'index.html')- 前端HTML
四、Ajax发送JSON格式数据
前后端传输数据的时候一定要保证编码格式数据与真正的数据格式是一致的
【1】引入
- 后端
def ab_json(request):
if request.method == 'POST':
print(request.POST) #
return render(request, 'ab_json.html') - 前端
- 请求标头携带的数据格式
- 已成功转换为JSON格式
{"username":"kevin","password":521521}【2】后端
- 接收到的数据为空
def ab_json(request):
if request.method == 'POST':
print(request.POST) #
return render(request, 'ab_json.html') -
Django针对JSON格式的数据不会做任何处理
-
针对JSON格式的数据需要自己手动处理
-
解决办法
def ab_json(request):
print(request.is_ajax()) # True
if request.method == 'POST':
print(request.POST) #
print(request.body) # 返回的是二进制数据 ：b'{"username":"dream","password":521521}'
# 针对JSON格式的数据需要自己手动处理
json_bytes = request.body
# (1)方式一：先解码 再转换数据格式
json_str = json_bytes.decode('utf-8')
json_dict = json.loads(json_str)
print(json_dict, type(json_dict)) # {'username': 'dream', 'password': 521521}
# (2)方式二：json.loads(二进制数据) 内部可以自动解码再反序列化
json_dict_loads = json.loads(json_bytes)
print(json_dict_loads, type(json_dict_loads)) # {'username': 'dream', 'password': 521521}
return render(request, 'ab_json.html') 【补充】request方法判断ajax
request.is_ajax()- 返回当前请求是否是ajax请求，返回布尔值
print(request.is_ajax())
正常浏览器网址回车提交的是 GET 请求 - 结果是False
当我们发送ajax请求后 - 结果是True【3】总结
- 前端在通过Ajax请求发送数据的时候，一定要注参数修改
// 不指定参数，默认就是 urlencoded
contentType: 'application/json',- 数据是真正的JSON格式数据
发送的数据一定要符合JSON格式
或经过JSON序列化再传输- Django后端不会帮我们处理JSON格式数据，需要自己手动处理
request.body中的数据
通过Ajax传过来的数据是二进制数据
在request.body中
要经过自己的反序列化才能拿到我们想要的数据五、Ajax提交文件数据
-
Ajax发送文件数据需要借助js内置对象formdata
-
前端
username:
password:
file:
- 后端
def ab_file(request):
if request.is_ajax():
if request.method == 'POST':
print('POST::>>', request.POST)
# 普通键值对放在了 request.POST 中
# POST::>>
print('FILES::>>', request.FILES)
# 文件数据放在了 request.FILES 中
# FILES::>> ]}>
return render(request, 'ab_file.html') 【发送文件数据的格式】
// 点击按钮向后端发送普通键值对数据和文件数据
$("#btn").on('click', function () {
// (1)先生成一个内置对象
let formDataObj = new FormData();
// (2)支持添加普通的键值对
formDataObj.append('username', $("#d1").val());
formDataObj.append('password', $("#d2").val());
// (3)支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
formDataObj.append('myfile', $("#d3")[0].files[0]);
// (4)基于Ajax，将文件对象发送给后端
$.ajax({
url: '',
type: 'post',
// 直接将对象放到data里面即可
data: formDataObj,
// Ajax发送文件必须添加的两个参数
// 不需要使用任何编码 - Django后端能自动识别 formdata 对象
contentType: false,
// 告诉浏览器不要对我的数据进行任何处理
processData: false,
success: function (args) {
}
})【结论】
- Ajax发送文件数据需要利用内置对象
FormData
// (1)先生成一个内置对象
let formDataObj = new FormData();
// (2)支持添加普通的键值对
formDataObj.append('username', $("#d1").val());
formDataObj.append('password', $("#d2").val());
// (3)支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
formDataObj.append('myfile', $("#d3")[0].files[0]);- 需要指定两个关键性的参数
// Ajax发送文件必须添加的两个参数
// 不需要使用任何编码 - Django后端能自动识别 formdata 对象
contentType: false,
// 告诉浏览器不要对我的数据进行任何处理
processData: false,- Django后端能直接自动识别到
FormData对象- 将内部的普通键值对自动解析并封装到
request.POST中 - 将内部的文件数据自动解析并封装到
request.FILES中
- 将内部的普通键值对自动解析并封装到
print('POST::>>', request.POST)
# 普通键值对放在了 request.POST 中
# POST::>>
print('FILES::>>', request.FILES)
# 文件数据放在了 request.FILES 中
# FILES::>> ]}> 六、Ajax结合layer弹窗实现二次确认
layer 弹出层组件 - jQuery 弹出层插件
七、批量插入数据
【1】项目需求
- 项目需求:
- 浏览器中访问django后端某一条
- url(如:127.0.0.1:8080/index/)
- 实时朝数据库中生成一千条数据并将生成的数据查询出来
- 并展示到前端页面
【2】解决方案
bulk_list = []
for i in range(10000):
user_obj=models.UserInfo(username='kevin%s' %i)
bulk_list.append(user_obj)
# 循环之后得到了一个列表，10000个对象
# 数据库的优化， 同样的功能，不同的sql执行的效率差距很大
# 优化查询速度的时候，首先想到的是，加索引、优化sql语句，有的sql走做引、有的sql不走索引
models.UserInfo.objects.bulk_create(bulk_list)