form表单提交提交文件，并接受后端传过来的数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form表单提交提交文件，并接受后端传过来的数据相关的知识，希望对你有一定的参考价值。
参考技术A 一般来说，前端对后端发送请求是通过ajax发送的，但是ajax对于文件的发送存在问题，所以我们主要还是通过form表单提交。如果前端接收文件之后需要向后端传输数据的话，就比较麻烦了。
解决办法：第一步：引入jquery.form
第二步：给form绑定ajaxform方法
有关post的三种提交格式
有关数据提交格式
前端
从前端往后端传数据，有三种编码方式
- urlencoded：form表单的默认方式
- form-data：form表单中指定enctype，传文件的方式
- json：只能用ajax，指定ContenType实现
其中，ajax也支持urlencoded，是ajax的默认方式
fromdata，ajax也支持，需要new一个fromdata对象才能用
后端
request.POST：接受urlencoded和form-data的编码方式，这里才有数据
request.body：其中有json格式的编码数据，但是是bytes类型，需要用json模块反序列化一下，变成字典，才能用
并不是前两种方法不在会在request.body中，而是request.POST只接受前两种，第三种json格式必须去请求体（request.body）里面取
额外
json.loads(bytes)中，3.6以上支持loads可以直接放bytes属性的数据，3.5及以下不支持
form表单
<form action="url" name="name" method="get/post" enctype="" target="">
</form>
action：url 地址，服务器接收表单数据的地址
method：提交服务器的http方法，一般为post和get
重点属性：enctype
-
application/x-www-form-urlencoded，默认使用，POST请求中，请求头中的content-type指定值就是该值。
<form action="" method="post" enctype="application/x-www-form-urlencoded"> <!--form表单发送post，需要指定method，--> 用户名：<input type="text" name="user" id="user"> 密码：<input type="text" name="pwd" id="pwd"> <input type="submit" value="提交"> </form>后端在request.POST接收
-
multipart/form-data，指定enctype类型，才能完成传递文件数据。
<form action="" method="post" enctype="multipart/form-data"> 用户名：<input type="text" name="user" id="user"> 密码：<input type="text" name="pwd" id="pwd"> 头像：<input type="file" name="avatar" id="avatar1"> <input type="submit" value="提交"> </form> <button id="submit_btn">提交</button>后端在request.POST接收，文件使用request.FIlES接收
以用户登陆的输入框为例
Ajax
application/json
hwk.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hwk</title>
{% load static %}
<script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
<!--必须先导入jQuery，才能使用ajax，django中放在static文件夹内，在settings中配置，load static导入-->
</head>
<body>
<div>
<form action="">
用户名：<input type="text" name="user" id="user">
密码：<input type="text" name="pwd" id="pwd">
</form>
<button id="submit_btn">提交</button>
<div>返回的数据:<p id="res"></p></div>
</div>
<script>
$("#submit_btn").click(function () {
// id绑定点击事件
$.ajax({
url: ‘‘,
type: ‘post‘,
contentType: ‘application/json‘,
//一定要指定格式 contentType: ‘application/json‘，发送的才是json格式数据
data: JSON.stringify({
// JSON.stringify将data整体转成json格式数据
‘user‘: $("#user").val(),
// id选择器，val()方法获取input框的值
‘pwd‘: $(‘#pwd‘).val(),
}),
success: function (res) {
$(‘#res‘).text(res.user+res.pwd)
// 请求成功回调
console.log(res)
}
})
});
</script>
</body>
</html>
views.py
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
# 导入JsonResponse
from django.views import View
# 使用CBV，必须导入View
import json
class Hwk(View):
def get(self, request):
return render(request, ‘hwk.html‘)
def post(self, request):
print(request.body)
# ajax发送来的json数据只有从请求体request.body里拿，这一种获取方式
dic1 = json.loads(request.body)
# 直接拿出来的是bytes格式，要转成json，使用loads方法
print(dic1)
return JsonResponse(dic1)
urlencoded
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hwk</title>
{% load static %}
<script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
</head>
<body>
<div>
<form action="">
用户名：<input type="text" name="user" id="user">
密码：<input type="text" name="pwd" id="pwd">
</form>
<button id="submit_btn">提交</button>
<div>返回的数据:<p id="res"></p></div>
</div>
<script>
$("#submit_btn").click(function () {
$.ajax({
url: ‘‘,
type: ‘post‘,
contentType:‘application/x-www-form-urlencoded‘,
// 指定urlencoded，其实默认的也是这个
data:{
// 因为不是json格式的数据，data就不需要用JSON转格式了，转了反而有问题
‘user‘: $("#user").val(),
‘pwd‘: $(‘#pwd‘).val(),
},
success: function (res) {
$(‘#res‘).text(res.user+res.pwd);
console.log(res)
}
})
});
</script>
</body>
</html>
class Hwk(View):
def get(self, request):
return render(request, ‘hwk.html‘)
def post(self, request):
# 接收数据使用request.POST，是一个QuerySet字典
print(request.POST)
dic1 = request.POST
return JsonResponse(dic1)
form-data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hwk</title>
{% load static %}
<script type="text/javascript" src="{% static ‘jQuery/jQuery-3.4.1.js‘ %}"></script>
</head>
<body>
<div>
<form action="">
用户名：<input type="text" name="user" id="user">
密码：<input type="text" name="pwd" id="pwd">
</form>
<button id="submit_btn">提交</button>
<div>返回的数据:<p id="res"></p></div>
</div>
<script>
$("#submit_btn").click(function () {
var formdata=new FormData();
// 需要new一个FormData对象，在哪创建都行，最后放在ajax的data里就可以了
formdata.append(‘user‘,$("#user").val());
formdata.append(‘pwd‘, $(‘#pwd‘).val());
$.ajax({
url: ‘‘,
type: ‘post‘,
processData:false, // 告诉jQuery不要去处理发送的数据
contentType:false, // 告诉jquery不要设置content-Type请求头
data:formdata,
success: function (res) {
$(‘#res‘).text(res.user+res.pwd);
console.log(res)
}
})
});
</script>
</body>
</html>
class Hwk(View):
def get(self, request):
return render(request, ‘hwk.html‘)
def post(self, request):
# 如果传来的是普通数据，在request.POST里，如果是文件，在request.FILES里取
print(request.POST)
dic1 = request.POST
return JsonResponse(dic1)
以上是关于form表单提交提交文件，并接受后端传过来的数据的主要内容，如果未能解决你的问题，请参考以下文章