Django组件之Ajax
一、什么是Ajax
在了解Ajax之前，我们前后端数据交互的方式有两种：
- 在浏览器地址栏输入地址（get）
- 用form表单提交数据
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。最常见的应用场景就是在你注册账号时，对你输入的用户名是否已被注册实时检验，然而并没有刷新整个页面。
二、基于jquery的Ajax实现
语法
$.ajax({ url:'/index/', # 向后台发送请求的地址 type:'post', # 请求方式 data:{'name':'lqz','age':18}, # 往后台提交的数据 success:function (data) { alert(data) } # 成功的时候回调这个函数，data是后台返回的数据
三、文件上传
3.1 原始文件上传
# 模板层（前端） <form action="/files/" method="post" enctype="multipart/form-data"> <p>用户名:<input type="text" name="name" id="name"></p> <p><input type="file" name="myfile" id="myfile"></p> <input type="submit" value="提交"> </form> # 路由控制（添加路由） from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^files/$', views.add_file), ] # 视图层 def add_file(request): if request.method=='GET': return render(request,'add_files.html') # 这是个字典 dic_files=request.FILES myfile=dic_files.get('myfile') with open(myfile.name,'wb') as f: # 循环上传过来的文件 for line in myfile: # 往空文件中写 f.write(line) return HttpResponse('上传成功！')
3.2 Ajax文件上传
# 模板层（前端） <body> <form action="/files/" method="post" enctype="multipart/form-data"> <p>用户名:<input type="text" name="name" id="name"></p> <p><input type="file" name="myfile" id="myfile"></p> </form> <button id="btn">ajax提交文件</button> </body> <script> $("#btn").click(function () { //上传文件,必须用FormData var formdata=new FormData(); formdata.append('name',$("#name").val()); //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来 formdata.append('myfile',$("#myfile")[0].files[0]); $.ajax({ url:'/files_ajax/', type:'post', //不预处理数据,(name=lqz&age=18) processData:false, //指定往后台传数据的编码格式(urlencoded,formdata,json) //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了 contentType:false, data:formdata, success:function (data) { alert(data) } }) }) </script> # 路由控制 from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^files_ajax/', views.files_ajax), ] #视图层 def files_ajax(request): # 提交文件从,request.FILES中取,提交的数据,从request.POST中取 name=request.POST.get('name') print(name) dic_files = request.FILES myfile = dic_files.get('myfile') with open(myfile.name, 'wb') as f: # 循环上传过来的文件 for line in myfile: # 往空文件中写 f.write(line) return HttpResponse('ok')
四、Ajax提交JSON格式数据
# 模板层 <body> <form > <p>用户名:<input type="text" name="name" id="name"></p> <p>密码:<input type="password" name="pwd" id="pwd"></p> </form> <button id="btn">ajax提交json格式</button> </body> <script> $('#btn').click(function () { var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()}; console.log(typeof post_data); # 前端如何把post_data这个字典,转成json格式字符串 # JSON.stringify相当于python中json.dumps(post_data) # 把post_data转化成json格式字符串 var pos=JSON.stringify(post_data); $.ajax({ url:'/json/', type:'post', data:pos, contentType:'application/json', # 请求头携带编码方式 # dataType:'json' success:function (data) { # 如果data是json格式字符串,如何转成对象(字典)? # data=JSON.parse(data) console.log(typeof data) console.log(data.status) } }) }) </script> # 视图层 def add_json(request): if request.method=='GET': return render(request,'json.html') print(request.POST) print(request.GET) print(request.body) import json # res是个字典 res=json.loads(request.body.decode('utf-8')) print(res) print(type(res)) dic={'status':'100','msg':'登录成功'} # 返回给前台json格式 # return HttpResponse(json.dumps(dic)) return JsonResponse(dic)
注：若后端以HttpResponse返回json格式字符串时，dataType:'json'的作用就是Ajax自己将字符串解析为对象
