Django中用Jquery實現不重新整理頁面進行身份驗證和計算器功能
阿新 • • 發佈：2018-12-30
1.下載jquery
http://www.jq22.com/jquery-info122
下載解壓之後加入工程中的static資料夾中
2.路由分發。
"""Django_demo1 URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from app01.views import classes, students , teachers
from app01.views import ajax
# from django.urls import re_path
urlpatterns = [
path('admin/', admin.site.urls),
path('classes.html/', classes.get_classes),
path('add_classes', classes.add_classes),
path('del_classes', classes.del_classes),
path('edit_classes', classes.edit_classes),
path('students.html/', students.get_students),
path('add_students', students.add_students),
path('del_students', students.del_students),
path('edit_students', students.edit_students),
path('teachers.html/', teachers.get_teachers),
path('cls_add_teachers', classes.cls_add_teachers),
path('ajax1.html', ajax.ajax1),
path('ajax2.html', ajax.ajax2),
path('ajax3.html', ajax.ajax3),
]
3.views資料夾中建立ajax檢視函式ajax.py
from django.shortcuts import render, redirect, HttpResponse
def ajax1(request):
return render(request, 'ajax1.html')
def ajax2(request):
user = request.GET.get('username')
pwd = request.GET.get('password')
import time
time.sleep(5)
return HttpResponse('ok')
# return render(request, 'ajax2.html')
def ajax3(request):
try:
v1 = request.POST.get('v1')
v2 = request.POST.get('v2')
print(v1, v2)
answer = int(v1) + int(v2)
except Exception as e:
answer = '輸入格式錯誤！'
return HttpResponse(answer)
4.在模板中新增ajax1.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
padding: 5px 15px;
background-color: darkgoldenrod;
color: white;
cursor:pointer;
}
</style>
</head>
<body>
<div>
<input placeholder="使用者名稱" type="text" id="username">
<input placeholder="密碼" type="password" id="password">
<div class="btn" onclick="submitForm()">提交</div>
</div>
<div>
<input placeholder="v1" type="text" id="v1" name="v1">
<input placeholder="v2" type="text" id="v2" name="v2">
<div class="btn" onclick="add_function()">相加等於</div>
<input placeholder="answer" type="text" id="answer">
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script>
function submitForm(){
var u = $('#username').val()
var p = $('#password').val()
console.log(u,p)
$.ajax({
url:'/ajax2.html',
type:'GET',
data:{username:u, password: p},
success:function (arg){
console.log(arg)
}
})
}
function add_function(){
var add1 = $('#v1').val()
var add2 = $('#v2').val()
console.log(add1,add2)
$.ajax({
url:'/ajax3.html',
type:'POST',
data:{'v1': add1, 'v2': add2},
success:function (arg){
console.log(arg)
$('#answer').val(arg)
}
})
}
</script>
</body>
</html>