Ajax课堂源码

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    # ajax 相关
    path("ajax_temp/", views.ajax_temp),
    path("ajax_sleep/", views.ajax_sleep),
    path("ajax_test/", views.ajax_test),
    path("ajax_sum/", views.ajax_sum),
    # path("ajax_json/", views.ajax_json),
    # path("upload/", views.upload),
]

　

views.py

from django.shortcuts import render, HttpResponse
from app01 import models

def ajax_sleep(request):
    import time
    time.sleep(3)
    return HttpResponse("睡了3s")

def ajax_temp(request):
    return render(request, "ajax_temp.html")


def ajax_test(request):
    return HttpResponse("test...")

from django.http import JsonResponse

def ajax_sum(request):
    if request.is_ajax():
        num1 = request.POST.get("num1")
        num2 = request.POST.get("num2")
        ret = {"status": 1, "msg": None}
        try:
            total = int(num1) + int(num2)
            ret['msg'] = total
        except Exception as e:
            ret['status'] = 0
            ret['msg'] = "请输入数字"
        # return HttpResponse(total)
        return JsonResponse(ret)
    ###  视图响应时，只能时HttpResponse或者JsonResponse，render和redirect不能作为ajax请求的返回对象。

　

ajax_temp.html

<button id="btn1">ajax_sleep</button>
<button id="btn2">ajax_test</button>
{% csrf_token %}

<div>
    <input type="text" id="i1"> + <input type="text" id="i2"> =
    <input type="text" id="i3"><button id="sum1">计算</button><span id="s1"></span>
</div>


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
    {#异步案例#}
    $("#btn1").click(function () {
        $.ajax({
            url: "/ajax_sleep/",
            type: "get",
            success: function (data) {
                console.log(data);
            }
        })
    });
    $("#btn2").click(function () {
        $.ajax({
            url: "/ajax_test/",
            type: "get",
            success: function (data) {
                console.log(data);
            }
        })
    });

    {#计算案例#}
    $("#sum1").click(function () {
        var num1 = $("#i1").val();
        var num2 = $("#i2").val();
        $.ajax({
            url: "/ajax_sum/",
            type: "post",
            data: {
                num1: num1,
                num2: num2,
                csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val(),
            },
            success: function (data) {
                // JSON.parse(data) 反序列化才能使用
                if (data.status){
                    $("#i3").val(data.msg);
                }else{
                    $("#s1").text(data.msg);
                    setTimeout(function () {
                        $("#s1").text("");
                    }, 2000)

                }

            }
        })
    });
</script>