利用ajax与后端交互，取得后端反馈过来的数据进行处理，从而在浏览器在不刷新的情况下，进行局部更新和异步请求。
Ajax的用法一
{# 本示例，实现的是页面不刷新实现账号密码验证登入#}
<script>
$('#myajax').click(function (){
$.ajax({
url:{% url 'mylogin' %},
type:'POST',
data: {
uname: $('#username').val(),
pwd: $('#password').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function (res){
{# 反序列化 #}
var resStr = JSON.parse(res)
if (resStr['status']==1)
{
location.href=resStr['content']
}
else if(resStr['status']==2)
{
$('#error').text(resStr['content'])
}
}
})
})
</script>
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
username = request.POST.get('uname')
password = request.POST.get('pwd')
if username == 'messi' and password == '123':
res_content1 = {'status': 1, 'content': reverse('books')}
return HttpResponse(json.dumps(res_content1))
else:
res_content2 = {'status': 2, 'content': '账户名或密码错误'}
return HttpResponse(json.dumps(res_content2))
外部文件导入的方式来写js代码,那么js代码中不能写django的模板语法。因为html文件的加载顺序:url--视图--html模板渲染 --- return给浏览器 -- 浏览器渲染 --- srcipt的src --才去请求js文件 --那么这个js文件的代码此时才加载到你的html文件中 -- 就没有模板渲染的步骤了 -- 就没有办法替换对应的模板语法。(只能写死)
conten_type用法解析
后端在返回数据的时候指定一个响应头content_type='application/json‘，那么ajax在拿到后端发过来的数据的时候，便无需我们手动进行反序列化，它看到content_type='application/json‘的时候，会自己反序列化好后再返回一个结果。
<script>
$('#btn_login').click(function (){
$.ajax({
url:'{% url 'mylogin' %}',
type:'POST',
data: {
uname: $('#name').val(),
pwd: $('#inputPassword3').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success:function (res){
{#无需反序列化#}
{#var resStr = JSON.parse(res)#}
resStr = res
console.log(res)
if (resStr['status']==1)
{
location.href=resStr['content']
}
else if(resStr['status']==2)
{
$('#error').text(resStr['content'])
}
}
})
})
</script>
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
username = request.POST.get('uname')
password = request.POST.get('pwd')
if username == 'messi' and password == '123':
res_content1 = {'status': 1, 'content': reverse('books')}
return HttpResponse(json.dumps(res_content1), content_type='application/json')
else:
res_content2 = {'status': 2, 'content': '账户名或密码错误'}
#再返回数据的时候加一个响应头content_type='application/json'
return HttpResponse(json.dumps(res_content2), content_type='application/json')
JsonResponse是HttpResponse的子类，他帮我们做了两件事：1.序列化数据；2.添加content_type='application/json'的响应头
from django.http import JsonResponse
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
username = request.POST.get('uname')
password = request.POST.get('pwd')
if username == 'messi' and password == '123':
res_content1 = {'status': 1, 'content': reverse('books')}
# return HttpResponse(json.dumps(res_content1), content_type='application/json')
return JsonResponse(res_content1)
else:
res_content2 = {'status': 2, 'content': '账户名或密码错误'}
# return HttpResponse(json.dumps(res_content2), content_type='application/json')
return JsonResponse(res_content2)
后端content_type默认=text/html，ajax默认的content_type=application/x-www-form-urlencoded; charset=UTF-8
解析器，就是根据Content_type来处理数据的。
- 当后端以content_type=text/html响应时，前端ajax，不能自动反序列化后端发过来的数据；
- 当后端以content_type=application/json响应时，前端ajax，能自动反序列化后端发过来的数据；
- 当前端以content_type=application/x-www-form-urlencoded; charset=UTF-8请求时，后端Django能有一套解析前端发来数据的机制，所有我们能够使用request.POST.get['name']取得所对应的数据；
- 当前端以content_type=application/json请求时，后端Django没有一套解析前端发来数据的机制，所有我们能够使用request.body取得所byte类型对应的数据，然后自己处理，得到我们想要的数据（如示例所示）。
<script>
var content = {};
content.name = 'mkc';
content.pwd = '123';
content.csrfmiddlewaretoken='{{ csrf_token }}';
console.log(content)
var data = JSON.stringify(content)
$.ajax({
url:'{% url 'data' %}',
type:'POST',
data:data,
contentType: 'application/json',
success:function (res){
$.each(res, function (k, v){
str = '<li>' + v + '</li>'
$('#o1').append(str)
})
console.log(res);
}
})
</script>
def data(request):
res_data = ['红楼梦', '水浒传', '三国演义', '西游记']
print(request.POST) #<QueryDict: {}>
print(request.body) #b'{"name":"mkc","pwd":"123","csrfmiddlewaretoken":"PeqnHO8FTcGMAftGpXFm7D7nnJX7ti5OrNRtwCdHeSi1ZhkES76OMJR9TdY7R85c"}'
recv_data = request.body.decode('utf-8')
print(recv_data) #{"name":"mkc","pwd":"123","csrfmiddlewaretoken":"PeqnHO8FTcGMAftGpXFm7D7nnJX7ti5OrNRtwCdHeSi1ZhkES76OMJR9TdY7R85c"}
recv_content = json.loads(recv_data)
print(recv_content)
name = recv_content['name']
print(name)
Ajax的用法二
对于后端发送的非字典数据，需要在后端设置safe=False，才能让ajax解析非字典数据
$.ajax({
url:'{% url 'data' %}',
type:'GET',
success:function (res){
console.log(res);
}
})
def data(request):
res_data = ['红楼梦', '水浒传', '三国演义', '西游记']
return JsonResponse(res_data, safe=False)
ajax用法二：局部添加数据
<script>
$.ajax({
url:'{% url 'data' %}',
type:'GET',
success:function (res){
$.each(res, function (k, v){
str = '<li>' + v + '</li>'
$('#o1').append(str)
})
{#console.log(res);#}
}
})
</script>