P57Ajax
浏览器通过url(GET方法)和表单形式(POST方法)向服务器发送请求时,页面会刷新,数据会消失
Ajax向后台发送请求,发送数据不会刷新页面
依赖jQuery
ajax代码
$.ajax({
url:'xxx',
type:'post',
data:{
n1:123,
n2:'abc',
},
success:function(res){
console.log(res);
}
})
免除ajax的post方式的csrf_token认证
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def task_ajax(request):
print(request.GET)
return HttpResponse("请求发到后端了")
绑定事件的方式:
1.基于dom方式
<input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
2.基于jQuery方式
{% extends 'layout.html' %}
{% block content %}
<div class="container">
<h1>任务列表</h1>
<h3>示例1</h3>
{# <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>#}
<input type="button" class="btn btn-primary" id="btn1" value="点击" />
</div>
{% endblock %}
{% block js %}
<script type="text/javascript">
{#基于dom方法绑定事件#}
{#function clickMe(){#}
{# console.log("点击了按钮");#}
{# $.ajax({#}
{# url: '/task_ajax',#}
{#type: 'get',#}
{# type: 'post',#}
{# data: {#}
{# n1: 123,#}
{# n2: 'abc',#}
{# },#}
{# success: function (res){#}
{# console.log(res);#}
{# }#}
{# })#}
{# } #}
$(function(){
//页面框架加载完成后自动执行
bindBtn1Event();
})
function bindBtn1Event() {
$("#btn1").click(function () {
$.ajax({
url: '/task_ajax/',
type: 'post',
data: {
n1: 123,
n2: 'abc',
},
{#将后端传过来JSON的转成字符串反序列化成JSON对象,使得前端可以直接调用#}
dataType: "JSON",
success: function (res) {
console.log(res);
console.log(res.data)
}
})
})
}
</script>
{% endblock %}
后端代码:
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def task_ajax(request):
print(request.GET)
data_dict = {
"status": True,
"data": [11, 22, 33, 45],
}
# import json
# json_string = json.dumps(data_dict)
# return HttpResponse(json)
# 可以利用django自带模块转成json格式
from django.http import JsonResponse
return JsonResponse(data_dict)