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在浏览器上执行。
  • 同步交互：
    • 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：
    • 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

场景：

优点：

1. 异步提交
2. 局部刷新

二、Ajax引入

案例

<script>//给input框绑定一个失去焦点的事件$(".btn").click(function () {var inp1 = $("#inp1").val();var inp2 = $("#inp2").val();// 把获取到的两个值提交到后端，然后让Python来计算，然后返回//$.ajax为固定用法，表示启用ajax$.ajax({//url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交    url:'', //type为标定你这个ajax请求的方法type:'post',dataType:'json',// 回调函数用来接收后端返回的数据data:{inp1:inp1, inp2:inp2},//success为回调函数，参数data即后端给你返回的数据success:function (res) {// {"username": "kevin", "password": 123}console.log(res,)  // 就是拿后端返回的数据// 反序列化{#res=JSON.stringify()#}// 后端返回的数据别忘了反序列化，但是你的护短别往了序列化{#res=JSON.parse(res)#}console.log(typeof res)  // 就是拿后端返回的数据console.log(res.username)  // 就是拿后端返回的数据console.log(res.password)  // 就是拿后端返回的数据{#$("#inp3").val(res);#}}})})
</script>def ab_ajax(request):# if request.is_ajax():if request.method=='POST':'''接收ajax提交过来的数据'''# <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>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)基本语法

<script>// 先给按钮绑定点击事件$('#btn').click(function () {// 向后端发送Ajax请求$.ajax({// (1)指定发送后端的请求接口url: '',// 不写就是朝当前地址发送请求// (2)请求方式type: "post", // 不指定默认就是 get 全小写// (3)提交数据data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},// (4)异步提交有一个回调函数 (异步回调机制)// 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果success: function (args) {{#alert(args)#}// 通过DOM操作动态数据渲染到第三个 input 框中console.log(args) // string$('#d3').val(args)},})})
</script>

(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

<form action="" method="post" enctype="multipart/form-data"><p>username: <input type="text" name="username" class="form-control"></p><p>password: <input type="password" name="password" class="form-control"></p><p>file: <input type="file"></p><p><input type="submit" class="btn btn-success"></p><p><input type="button" class="btn btn-danger" value="按钮" id="d1"></p>
</form><script>$("#d1").click(function () {$.ajax({url: '',type: 'POST',data: {"username": "kevin", "password": 1314521},success: function (args) {},})})
</script>

四、Ajax发送JSON格式数据

前后端传输数据的时候一定要保证编码格式数据与真正的数据格式是一致的

【1】引入

• 后端

def ab_json(request):if request.method == 'POST':print(request.POST) #<QueryDict: {}>return render(request, 'ab_json.html')

• 前端

<button class="btn btn-danger" id="d1">点我</button><script>$('#d1').click(function () {$.ajax({url: '',type: 'post',// 前端数据转JSON格式数据 ：JSON.stringifydata: JSON.stringify({"username": "kevin", "password": 521521}),// 不指定参数，默认就是 urlencodedcontentType: 'application/json',success: function (args) {}})})
</script>

• 请求标头携带的数据格式
  • 已成功转换为JSON格式

{"username":"kevin","password":521521}

【2】后端

• 接收到的数据为空

def ab_json(request):if request.method == 'POST':print(request.POST) #<QueryDict: {}>return render(request, 'ab_json.html')

• Django针对JSON格式的数据不会做任何处理

• 针对JSON格式的数据需要自己手动处理

• 解决办法

def ab_json(request):print(request.is_ajax())  # Trueif request.method == 'POST':print(request.POST)  # <QueryDict: {}>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} <class 'dict'># (2)方式二：json.loads(二进制数据) 内部可以自动解码再反序列化json_dict_loads = json.loads(json_bytes)print(json_dict_loads, type(json_dict_loads))  # {'username': 'dream', 'password': 521521} <class 'dict'>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

• 前端

<p>username: <input type="text" name="username" id="d1"></p>
<p>password: <input type="password" name="password" id="d2"></p>
<p>file: <input type="file" id="d3"></p><button id="btn" class="btn btn-danger">提交</button><script>// 点击按钮向后端发送普通键值对数据和文件数据$("#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) {}})})
</script>

• 后端

def ab_file(request):if request.is_ajax():if request.method == 'POST':print('POST::>>', request.POST)# 普通键值对放在了  request.POST   中# POST::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>print('FILES::>>', request.FILES)# 文件数据放在了  request.FILES   中# FILES::>> <MultiValueDict: {'myfile': [<InMemoryUploadedFile: img.png (image/png)>]}>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::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>print('FILES::>>', request.FILES)
# 文件数据放在了  request.FILES   中
# FILES::>> <MultiValueDict: {'myfile': [<InMemoryUploadedFile: img.png (image/png)>]}>

六、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)