互联网站产品开发的流程,wordpress更新网站内容,网页设计在哪里接单,做网站公司 深圳信科【一】前后端传输数据的编码格式(contentType) 主要研究POST请求数据的编码格式 因为GET请求数据就是直接放在url后面的 可以朝后端发送post请求的方式 form请求ajax请求api工具
【1】form表单 前后端传输数据的格式 urlencoded formdata json
【2】编码格式
form表单默认…【一】前后端传输数据的编码格式(contentType) 主要研究POST请求数据的编码格式 因为GET请求数据就是直接放在url后面的 可以朝后端发送post请求的方式 form请求ajax请求api工具
【1】form表单 前后端传输数据的格式 urlencoded formdata json
【2】编码格式
form表单默认的编码格式是urlencoded 通过查看请求头中的 Content-Type 参数
text/html,application/xhtmlxml,application/xml;q0.9,image/avif,image/webp,image/apng,*/*;q0.8,application/signed-exchange;vb3;q0.7
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q0.9,en;q0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:27
Content-Type:application/x-www-form-urlencoded
携带数据格式
username666666password66 Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中 如果编码格式改为 formdata 那么针对普通的键值对还是解析到 request.POST 中而其他文件格式的数据解析到 request.FILES 中 form表单无法发送json格式数据
【3】Ajax
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q0.9,en;q0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:31
Content-Type:application/x-www-form-urlencoded; charsetUTF-8
默认的编码格式是 urlencoded数据格式
usernamedreampassword1314521
Django后端针对 urlencoded 编码格式的数据会自动帮我们解析封装到 request.POST 中 ---usernamedreampassword1314521
【4】代码演示
后端
def index(request):if request.method POST:print(request.POST)print(request.FILES)return render(request, index.html)
前端HTML
form action methodpost enctypemultipart/form-datapusername: input typetext nameusername classform-control/pppassword: input typepassword namepassword classform-control/ppfile: input typefile/ppinput typesubmit classbtn btn-success/ppinput typebutton classbtn btn-danger value按钮 idd1/p
/formscript$(#d1).click(function () {$.ajax({url: ,type: POST,data: {username: dream, password: 1314521},success: function (args) {},})})
/script
【二】Ajax发送JSON格式数据 前后端传输数据的时候一定要保证编码格式数据与真正的数据格式是一致的 {username:kevin, password:123} 它不符合urlencoded格式的数据 前端
$.ajax({url:,type:post,data:JSON.stringify({a:1, b:2}), // 序列化的 {a:1, b:2}contentType:application/json, // json格式的success:function (res) {}})
后端
def index(request):if request.method POST:request.POST只能接收post请求的符合urlencoded编码格式的数据 {}print(request.POST) # QueryDict: {}print(request.body) # b{a:1,b:2}json_bytesrequest.body # 接收浏览器发过来的纯原生的数据二进制需要自己做封装处理json_strjson_bytes.decode(utf-8) # {a:1,b:2} class strprint(json_str, type(json_str))import jsonjson_dict json.loads(json_str)print(json_dict, type(json_dict)) # {a: 1, b: 2} class dictjson_dictjson.loads(json_bytes) # 最好不要省略print(json_dict, type(json_dict)) # {a: 1, b: 2} class dictreturn render(request, index.html)
【三】Ajax发送文件数据 Ajax发送文件数据需要借助js内置对象formdata 前端
script$(.btn).click(function (ev) {console.log(123);// 要获取到文件数据{#console.log($(#myfile)[0].files[0]) // C:\fakepath\123.png#}// 提交文件数据需要借助于formdata对象var myFormDataObj new FormData;var username $(#username).val();var myfile $(#myfile)[0].files[0];myFormDataObj.append(username, username);myFormDataObj.append(myfile,myfile);$.ajax({url: ,type: post,{#data: JSON.stringify({a: 1, b: 2}), // 序列化的 {a:1, b:2}#}data: myFormDataObj, // 序列化的 {a:1, b:2}{#contentType: application/json, // json格式的#}contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理processData: false, //success: function (res) {}})})
/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)
Ajax结合layer弹窗实现二次确认
https://layuiweb.com/layer/index.htm
