创建 ajax_lession 和 app01 应用
修改 settings.py
# 注释
# 'django.middleware.csrf.CsrfViewMiddleware',
# 添加
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
添加 static 文件夹 和 jquery-3.3.1.min.js
在 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=" 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/
