Django与Ajax

一、关于Ajax

1、概念：Ajax翻译成中文就是异步Javascript和XML，即使用JAvascript语言与服务器进行异步交互，传输的数据XML，当然传输的不只是XML，现在更多使用的是jsaon数据。
2、异步：请求发出去，不会卡在这里，可以干其他的事情。
3、局部刷新：js的dom操作，使页面局部刷新。
4、基本上web页面有很多ajax请求。

二、ajax与后端交互-发送get请求

现在比较主流做法，jquery(前后端混合)，axios(前后端分离)

🌼 简单案例：

一、ajax发送get请求

视图层：

from django.shortcuts import render
from django.http import JsonResponse

def ajax_get(request):
return render(request,'ajax_get.html')

def ajax_sum(request):
a1=request.GET.get('a1')
a2=request.GET.get('a2')
sum=int(a1)+int(a2)
return JsonResponse(sum,safe=False)

模版层

+ =

计算

ajax发送其他请求

视图层

def ajax_login(request):
if request.method'GET':
return render(request,'ajax_login.html')
username=request.POST.get('username')
password=request.POST.get('password')
if username'judy' and password=='123':
return JsonResponse('登入成功',safe=False)
return JsonResponse('用户名或密码错误',safe=False)

模版层

username:

password:

提交

注意事项

1、如果在form表单中，写button或者input是submit类型就会触发form表单的提交，如果不想触发有两种解决方案，第一可以不要写在form表单中，第二使用input但是类型选择button
2、如果后端相应格式是html/text格式，ajax接收到数据后需要自己转成对象，后端如果响应格式是json格式，ajax会接收到数据自动转成对象。总结：后端返回数据的时候统一使用JASONRESPONSE。
3、一旦使用了ajaz，是能是字符串或者jsaon格式，其他都是不能使用的。

上传文件

知识补充

1、http post请求，有编码格式，主流的有三种：
-urlencoded 默认的-->从request.POST提取数据
-form-data 上传文件-->从request.POST提取数据，从request.FILES中取文件
-json ajax发送json格式-->rquest.POST取不到数据

🌼简单案例

视图层

def ajax_files(request):
if request.method == 'GET':
return render(request, 'ajax_file.html')
if request.is_ajax():
my_data = request.FILES.get('my_file')
with open('xxx', 'wb') as f:
for line in my_data:
f.write(line)
return JsonResponse('上传文件成功', safe=False)

模版层

提交

ajax结合layer弹窗实现二次确认

🌼简单案例

视图层

def ajax_layer(request):
if request.method=='GET':
data=models.User.objects.all()
return render(request,'ajax_layer.html',locals())
if request.is_ajax():
dic={'status':200,'msg':'删除数据成功'}
id=request.POST.get('id')
models.User.objects.filter(pk=id).delete()
return JsonResponse(dic)

模版层

{% for dic in data %}

id	username	password	操作
{{ dic.id }}	{{ dic.username }}	{{ dic.password }}	<a class="button" id="btn_"{{ dic.id }} onclick="del_user({{ dic.id }})">删除

ajax发送json数据

🌼 前端发送
$.ajax({
type:"POST",
url:"/panorama/saveScene",
processData: false,
contentType: "application/json;charset=utf-8", //这个是发送信息至服务器时内容编码类型
dataType: "json",
data:JSON.stringify(xml_data),//这里必须将对象转成string类型，否则将掉入无线的大坑中。。。
success:function(msg){
alert(msg);
}
})

🌼 后端接收
后端接收要利用request.body接收
为此我们可以写一个装饰器

def outer(func):
def inner(request,args,**kwargs):
try:
request.data=json.loads(request.body)
except Exception as e:
request.data=request.POST
res=func(request,args,**kwargs)
return res
return inner
这样的话，不管数据是射从request.body中拿还是从request.POST中拿，我们统一从request.data拿即可。