32 ajax发送文件+stringify与parse方法+dataType参数+序列化模块
一、ajax发送文件
ajax发送文件需要借助于js内置对象FormData
ab_ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> 文件数据：<input type="file" id="i1"> 普通数据：<input type="text" id="i2"> 普通数据：<input type="text" id="i3"> <button id="b1">ajax提交</button> <script> $('#b1').click(function (){ // ajax发送携带文件数据的请求，需要借助于内置对象FormData // 1.先生成一个FormData对象 let formDataObj = new FormData(); // 2.往该对象中添加数据（支持普通和文本数据） formDataObj.append('name',$('#i2').val()); formDataObj.append('name',$('#i3').val()); // 3.获取文件数据 有固定的语法格式 formDataObj.append('file',$('#i1')[0].files[0]); //先找到Input标签，再取索引0转成原生js,点files对象，取o // 发送ajax请求 $.ajax({ url:"/ab_file/", type:'post', // 发送文件需要额外配置的两个参数 contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象 processData:false, // 告诉你的浏览器不要对你的数据进行任何处理 data:formDataObj, // 直接将对象放在data后面即可 success:function(){ } }) }) </script> </body> </html>
views.py
from django.shortcuts import render,HttpResponse,redirect def ab_file(request): if request.is_ajax(): // 判断是否是ajax请求 if request.method == 'POST': print(request.POST) print(request.FILES) return HttpResponse('OK') """ 总结: 1.需要利用内置对象FormData // 2 添加普通的键值对 formDateObj.append('username',$('#d1').val()); formDateObj.append('password',$('#d2').val()); // 3 添加文件对象 formDateObj.append('myfile',$('#d3')[0].files[0]) 2.需要指定两个关键性的参数 contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象 processData:false, // 告诉你的浏览器不要对你的数据进行任何处理 3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
二、stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
JSON.parse('{"name":"Howker"}'); JSON.parse('{name:"Stack"}') ; // 错误 JSON.parse('[18,undefined]') ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"Tonny"})
三、dataType参数
date参数前后端交互 如果采用的是ajax 那么后端的返回值应该使用字典(json格式)
"""前后端交互 如果采用的是ajax 那么后端的返回值应该使用字典(json格式)""" 当后端采用HttpResponse返回json格式数据到ajax异步回调函数默认情况下需要我们自己做反序列化JSON.parse如果不想自己处理可以添加dataType:"JSON" 如果后端是采用JsonResponse返回json格式数据则无需我们自己处理也不需要添加 dataType:"JSON"参数(加了也不影响) # 以后推荐加上 增加程序兼容性
ab_ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button id="b1">ajax提交</button> <script> $('#b1').on('click',function (){ $.ajax({ uel:'/ab_json/', type:'post', data:'', dataType:JSON, success:function(args){ console.log(args); console.log(typeof args); // 反序列化 {#let json_obj = JSON.parse(args);#} {#console.log(json_obj);#} {#console.log(typeof json_obj);#} {#console.log(json_obj.code)#} } }) }) </script> </body> </html>
views.py
from django.shortcuts import render, HttpResponse, redirect import json from django.http import JsonResponse def ab_json(request): back_dic = {'code':None,'msg':None} back_dic['code'] = 10000 back_dic['msg'] = '一切正常' # return HttpResponse(json.dumps(back_dic)) return JsonResponse(back_dic) """前后端交互 如果采用的是ajax 那么后端的返回值应该使用字典(json格式)""" 当后端采用HttpResponse返回json格式数据到ajax异步回调函数默认情况下需要我们自己做反序列化JSON.parse如果不想自己处理可以添加dataType:"JSON" 如果后端是采用JsonResponse返回json格式数据则无需我们自己处理也不需要添加 dataType:"JSON"参数(加了也不影响) # 以后推荐加上 增加程序兼容性
四、序列化
Django内置的serializers
什么意思呢？就是我的前段想拿到由ORM得到的数据库里面的一个个用户对象，我的后端想直接将实例化出来的数据对象直接发送给客户端，那么这个时候，就可以用Django给我们提供的序列化方式
def ser(request): #拿到用户表里面的所有的用户对象 user_list=models.User.objects.all() #导入内置序列化模块 from django.core import serializers #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据 ret=serializers.serialize('json',user_list) return HttpResponse(ret)
from django.core import serializers def ab_ser(request): data = models.Books.objects.all() # new_list = [] # for obj in data: # 数据对象 # temp_dict = {} # temp_dict['table'] = 'app01.Books' # temp_dict['pk'] = obj.pk # temp_dict['title'] = obj.title # temp_dict['price'] = obj.price # temp_dict['publish_name'] = obj.publish_name # new_list.append(temp_dict) # return JsonResponse(new_list, safe=False) # 调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据 ret = serializers.serialize('json', data) # DRF的前身 等同于上面的步骤 return HttpResponse(ret)
