##Django框架图解
##前后端传输数据的编码格式
#前后端传输数据的编码格式 1.urlencoded 2.formdata 3.application/json
##From表单和Ajax方式在前端往后端发送文件
form表单默认的编码格式是urlencoded不支持发文件(只能把文件名发过去) 它所对应数据格式 username=jason&password=123 request.POST只能解析urlencoded数据格式的数据 formdata django会帮你把文件数据取出来 放入request.FILES里面 专门用来传文件的 Ajax默认提交的编码格式也是urlencoded 当用ajax传输json格式的数据时候 django不会做任何处理 数据以二进制形式放在request.body中 你可以手动解码加反序列化拿到对应的字典格式数据 Ajax发送json格式数据
$.ajax({
url:'', // 不写默认朝当前页面所在的url地址提交
type:'post',
contentType:'application/json',//修改默认的编码格式
data:JSON.stringify({'name':'jason','csrfmiddlewaretoken':'{{ csrf_token }}'}), //将数据修改为json格式
success:function (data) {
alert(data)
}
}) ajax发送文件 利用js内置的FormData对象
def index(request): if request.method == 'POST': print(request.POST) print(request.FILES) # file_obj = request.FILES.get('myfile') # print(file_obj.name) # 查看当前文件对象的文件名 #form表单传过来的数据写入服务器本地文件（注意：编码不是默认的urlencoded，而是修改成enctype="multipart/form-data">） # with open(file_obj.name,'wb') as f: # for line in file_obj: # f.write(line) #ajax发过来的数据是以二进制数据单独在request.body中，可进行解码然后序列化得到数据字典格式 # print(request.body) # bytes_str = request.body # res = json.loads(bytes_str.decode('utf-8')) # print(res,type(res)) return render(request,'index.html')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
{#<form action="" method="post" enctype="multipart/form-data">#}
{# {% csrf_token %}#}
{# <p>username:<input type="text" name="username"></p>#}
{# <p>password:<input type="password" name="password"></p>#}
{# <p>image:<input type="file" name="myfile"></p>#}
{# <input type="submit">#}
{#</form>#}
<input type="file" name="myfile" id="d2">
<button id="d1">点我</button>
<script>
$('#d1').click(function () {
// 如果用ajax发送文件 需要使用内置对象FormData
var formData = new FormData(); // 生成一个内置对象
// 内置对象formdata既可以传普通的键值对，也可以传文件
formData.append('name','jason'); // 普通键值对
formData.append('password','123');
// 传文件
var fileObj = $('#d2')[0].files[0]; // 先获取标签对象 转成原生js对象 通过内置的files方法拿到列表 然后去索引0拿到文件对象
formData.append('myfile',fileObj);
$.ajax({
url:'', // 不写默认朝当前页面所在的url地址提交
type:'post',
// 注意ajax在发送文件的时候 需要你手动指定两个特殊的参数
contentType:false, // 不要用任何编码 使用我formdata自带的编码即可
processData:false, // 浏览器不要处理我的数据 是什么就什么
data:formData,
success:function (data) {
alert(data)
}
})
})
</script>
</body>
</html>
##补充一下页面清缓存
浙公网安备 33010602011771号