2022暑期实践（Django教程学习记录）（第五周1）P57Ajax1

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)