10-项目实战-ajax初体验

一.ajax介绍

1. ajax架构

浏览器向网站发送请求时: URL 和 表单的形式提交
    form表单:
        - GET
        - POST
        特点: 页面刷新

    除此之外,也可以基于Ajax向后台发送请求(偷偷的发送请求)
        - 依赖jQuery
        - 编写ajax代码
            $.ajax({
                url:"发送的地址",
                type:"post",
                "data":{
                    n1:123,
                    n2:456
                },
                success:function(res){   # res:后端返回的值
                    console.log(res);
                }
            })

2.ajax请求方式

########### GET 请求 #########
$.ajax({
                url:"/task/ajax/",
                type:"get",
                data:{
                    n1:123,
                    n2:456
                },
                success: function(res){
                    console.log(res);
                }
            })


def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了")


########### POST 请求 #########
$.ajax({
                url:"/task/ajax/",
                type:"post",
                data:{
                    n1:123,
                    n2:456
                },
                success: function(res){
                    console.log(res);
                }
            })


from django.views.decorators.csrf import csrf_exempt

# 通过ajax发送post请求时,加上 @csrf_exempt 免除 csrf_token 认证
@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    return HttpResponse("成功了")

二.ajax示例

1. ajax初体验-创建路由(url)

from bbc_list.views import task

urlpatterns = [
  path("task/ajax/", task.task_ajax),]

2. ajax初体验-创建html页面(task_ajax.html)

# 1.  - 按钮绑定事件
{% extends "one.html" %}

{% block content %}
<div>
    <h1>Ajax学习</h1>

    <h3>实例1</h3>
    <input id="btn1" type="button" class="btn btn-primary" value="点击1">

    <h3>实例2</h3>
        <input type="text" id="txtUser" placeholder="姓名">
        <input type="text" id="txtAge" placeholder="年龄">
        <input id="btn2" type="button" class="btn btn-primary" value="点击2">

    <h3>实例3</h3>
        <form id="form3">
            <input type="text" name="user" placeholder="姓名">
            <input type="text" name="age" placeholder="年龄">
            <input type="text" name="email" placeholder="邮箱">
            <input type="text" name="more" placeholder="介绍">
            <input id="btn3" type="button" class="btn btn-primary" value="点击3">
        </form>

</div>
{% endblock %}

# ajax请求-task_ajax.html
{% block js %}
<script type="text/javascript">
    //创建公共函数
    $(function(){
        //页面框架加载完后代码自动执行
            bindBtb1Event();
            bindBtb2Event();
            bindBtb3Event()
    })

    function bindBtb1Event(){
        $("#btn1").click(function(){

            $.ajax({
                url:"/task/ajax/",  //提交路径
                type:"post",       //请求方式
                data:{            //提交参数
                    n1:123,
                    n2:456
                },
                dataType:"JSON",  //将json反序列化,转换成对象
                success: function(res){     //请求成功后返回的数据
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);

                }
            })
        })
    }



    function bindBtb2Event(){
        $('#btn2').click(function(){
            $.ajax({
                url:"/task/ajax/",
                type:"post",
                data:{
                       name: $("#txtUser").val(), //获取用户输入的值
                       age:$("#txtAge").val(),
                },
                dataType:"JSON", //将json反序列化,转化成对象
                success:function(res){
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }

            })

        })
    }


    function bindBtb3Event(){
            $("#btn3").click(function(){
                $.ajax({
                    url:"/task/ajax/",
                    type:"post",
                    data:$("#form3").serialize(), //会自动将表单中的输入值打包
                    dataType:"JSON", //将json反序列化,获取对象
                    success: function(res){
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data)


                    }
                })

            })
    }

</script>

{% endblock %}

3. ajax初体验-创建视图函数(task.py)

from django.views.decorators.csrf import csrf_exempt

# 通过ajax发送post请求时,加上 @csrf_exempt 免除 csrf_token 认证
@csrf_exempt
def task_ajax(request):
    """ajax练习"""
    print("request.GET=", request.GET)
    print("request.POST=", request.POST)
    if request.method == "GET":
        return render(request, "task_ajax.html")

    data_dict = {"status": 200, "data": [11, 12, 13]}
    import json
    return HttpResponse(json.dumps(data_dict))

    # from django.http import JsonResponse  # django自带json格式
    # return JsonResponse(data_dict)

4. ajax初体验-示例

# get请求