Django之提交表单与前后端交互的方法之提交表单与前后端交互的方法
今天小编就为大家分享一篇Django之提交表单与前后端交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随
小编过来看看吧
Django之META与前后端交互
1 提交表单之提交表单之GET
前端提交数据与发送
1）提交表单数据
2）提交JSON数据
后端的数据接收与响应
1）接收GET请求数据
2）接收POST请求数据
3）响应请求
GET 请求过程
前端通过ajax发起GET请求,json格式数据
var data = {
"name": "test",
"age": 1
};
$.ajax({
type: 'GET',
url: /your/url/,
data: data, # 最终会被转化为查询字符串跟在url后面： /your/url/?name=test&age=1
dataType: 'json', # 注意：这里是指服务端返回json格式的数据
success: function(data) { # 这里的data就是json格式的数据
},
error: function(xhr, type) {
}
});
后端接受GET请求数据
name = request.GET.get('name', '')
age = int(request.GET.get('age', '0'))
2 提交表单之提交表单之POST
方式一:
前端发送POST请求:
var data = {}
# 如果页面并没有表单，只是input框，请求也只是发送这些值，那么可以直接获取放到data中
data['name'] = $('#name').val()
# 如果页面有表单，那么可以利用jquery的serialize()方法获取表单的全部数据
data = $('#form1').serialize();
$.ajax({
type: 'POST',
url: /your/url/,
data: data, #request Header中默认是Content-Type:application/x-www-form-urlencoded
dataType: 'json', # 注意：期望服务器返回的数据类型
success: function(data) { # 这里的data就是json格式的数据
},
error: function(xhr, type) {
}
});
注: ajax中没有指明content-type类型,请求头中默认是Content-Type:application/x-www-form-urlencoded,因此参数会编码为 name=xx&age=1 提交到后端,后端作为表单数据处理
后端接受请求表单数据:
name = request.POST.get('name', '')
age = int(request.POST.get('age', '0'))
方式二:
前端通过POST提交JSON数据
# POST一个json数据
var data = {
“name”: "test",
"age", 1
}
$.ajax({
type: 'POST',
url: /your/url/,
data: JSON.stringify(data), # json对象转化为字符串
#request Header注明content-type:'application/json; charset=UTF-8'
contentType: 'application/json; charset=UTF-8',
dataType: 'json', # 注意：期望服务端返回json格式的数据
success: function(data) { # 这里的data就是json格式的数据
},
error: function(xhr, type) {
}
});
注: 如果要给后端传递json数据,就需要增加content-type参数，告诉后端，传递过来的数据格式，并
且需要将data转为字符串进行传递。实际上，服务端接收到后，发现是json格式，做的操作就是将字符串转为json对象。
另外，不转为字符串，即使加了content-type的参数，也默认会转成name=xx&age=1，使后端无法获取正确的json。
评论0