1.MTV与MVC
框架类型：
MVC：
M：models
V:views
C:controller
Django用的框架就是MTV
MTV:
M:models
T:templates
V:views
ps:MTV本质也是MVC，叫法不同
# 名称：异步的Javascript和XML # 特点： 局部刷新、异步提交：AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
# ajax 发送普通数据 # 前端必须导入jquery # 实例:写出一个加法运算页面 # urls.py url(r'^index/', views.index), # views.py def index(request): if request.method == 'POST': print(request.POST) # 后端获取到的前端提交的数据，默认都是字符串类型 i1 = request.POST.get('i1') i2 = request.POST.get('i2') # 可以做一个数字判断 res = int(i1) + int(i2) return HttpResponse(res) return render(request,'index.html') # 前端<head>里需要导入jquery <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="b1">计算</button> <script> $('#b1').click(function () { $.ajax({ url:'', //控制数据提交目的地，不写默认就是当前页面所在的url type:'post', // 控制提交方式 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, //提交的数据 success:function (data) { // 形参data接收到的就是异步提交返回的结果 $('#i3').val(data) } }) }) </script> </body>
1.1 ajax基本语法结构
$.ajax({ url:'', //控制数据提交目的地，不写默认就是当前页面所在的url type:'post', // 控制提交方式 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, //提交的数据 success:function (data) { // data接收到的就是异步提交返回的结果，这里的data和上面的data无关 $('#i3').val(data) } })
1.2 ajax前后端传输数据编码格式
1.发送普通数据(前例)
2.发送json格式数据
django针对json格式的数据 不做任何处理
3.ajax发送文件
需要借助于内置对象FormData
# 浏览器上ContentType:表示数据的编码格式，告诉后端这个数据的格式 # 编码格式： 1.utlencoded:是form表单和ajax都默认的编码格式 urlencoded数据格式： i1=1&i2=2 #加法页面 # django后端会将符合urlencode编码格式的数据 解析并放入request.POST中
2.application/json
3.formdata
# 基本使用 数据格式和编码要一致，不能数据时urlencoded格式 编码却指定成了json格式 # 前端json格式转换 JSON.stringify({'name':'simon','password':'123'}) # 等价于 json.dumps() JSON.parse() # 等价于json.loads()
# 前端，绑定事件 <button id="b1">计算</button> <script> $('#b1').click(function () { $.ajax({ url: '/json/', type: 'post', data: JSON.stringify({'name': 'simon', 'password': '123'}), //前端转json格式 contentType: 'application/json', // 如果不指定编码，后端会出现数据错乱的现象 success: function (data) { alert(data) } }) }) </script> # views.py import json def jason(request): if request.method == 'POST': print(request.POST) # <QueryDict: {}> 针对json格式数据，不做处理,不会放到request.post中,放到request.body中 print(request.body) # 原始数据 b'{"name":"simon","password":"123"}' res = json.loads(request.body.decode('utf-8')) print(res,type(res)) # {'name': 'simon', 'password': '123'} <class 'dict'> return HttpResponse("OK")
formdata：文件交互，获取用户上传的文件
# 前端 <input type="file" id="myfile"> </script> //ajax发送文件 $('#b1').click(function () { // ajax发送文件一定要借助内置对象：先生成一个内置对象 //formData不仅可以传文件，也可以传普通的键值对，符合urlencoded编码格式的数据 var formData = new FormData(); //以添加键值对的方式，往formdata中添加数据 // 获取文件input框中对应的文件对象，固定语法 $('#myfile')[0].files[0] formData.append('myfile',$('#myfile')[0].files[0]); formData.append('username','simon'); $.ajax({ url:'/json/', type:'post', data: formData, // ajax发送文件需要记住的参数 processData: false, //不要处理formdata格式数据 contentType: false, //不需要指定任何编码，formdata自带编码 success:function (data) { alert(data) } }) }) </script> # 后端views.py def jason(request): if request.method == 'POST': print(request.POST) # 传普通键值对<QueryDict: {'username': ['simon']}> print(request.FILES) # 获取前端传输的文件 <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 周末四期前端jq+bs.md (application/octet-stream)>]}> # 获取文件对象:可以当成文件句柄：with open(...) as f的那个f file_obj = request.FILES.get('myfile') print(file_obj.name) # 查看文件名 with open(file_obj.name,'wb') as f: for line in file_obj: f.write(line) return HttpResponse("OK")