创建 ajax_lession 和 app01 应用

修改 settings.py

# 注释
#    'django.middleware.csrf.CsrfViewMiddleware',

# 添加
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

添加 static 文件夹 和 jquery-3.3.1.min.js

Django ajax 实现 loading 效果_html

在 templates 下添加 ajax_jquery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
    <div style="width: 200px;height:100px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">　　
        <div class="progress progress-striped active"
             style="margin-bottom: 0;height:50px; text-align:center;line-height: 50px;font-size:large;">
              数据加载中....　　　　
        </div>
    </div>
</div>

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"> <button class="cal">计算</button>

<script src="/static/jquery-3.3.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>

    //展示loading框
    showLoading = function ()
    {
         $('#loadingModal').modal({backdrop: 'static', keyboard: false});
    }
    //隐藏掉loading框
    hideLoading = function ()
    {
         $('#loadingModal').modal('hide');
    }


      $(".cal").click(function () {
          $.ajax({
              url: "/cal/",
              type: "post",
               data: {
                   "n1":$("#num1").val(),
                   "n2":$("#num2").val(),
              },
              beforeSend:function(){
                 // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                  showLoading()
              },
              complete: function(){
                  //$('#loadingModal').modal('hide');
                  hideLoading()
              },
              success:function (data) {
                  console.log(data);
                  $("#ret").val(data);
              }
          })
      });
 </script>
</body>
</html>

修改 urls.py

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('jquery_test/', views.jquery_test),
    path('jquery_get/', views.jquery_get),
    path('cal/', views.cal),
]

修改 views.py

from django.shortcuts import render
from django.http import HttpResponse
import time
# Create your views here.
def jquery_test(req):

    return render(req, "ajax_jquery.html")


def jquery_get(req):
    print(req.GET)
    return HttpResponse("ok")


def cal(request):
    n1 = int(request.POST.get("n1"))
    n2 = int(request.POST.get("n2"))
    time.sleep(5)
    ret = n1 + n2

    return HttpResponse(ret)

访问

http://127.0.0.1:8000/jquery_test/
Django ajax 实现 loading 效果_ajax_02