Django中用Jquery实现不刷新页面进行身份验证和计算器功能
生活随笔
收集整理的這篇文章主要介紹了
Django中用Jquery实现不刷新页面进行身份验证和计算器功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.下載jquery
http://www.jq22.com/jquery-info122
下載解壓之后加入工程中的static文件夾中
2.路由分發。
"""Django_demo1 URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/2.1/topics/http/urls/ Examples: Function views1. Add an import: from my_app import views2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views1. Add an import: from other_app.views import Home2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf1. Import the include() function: from django.urls import include, path2. 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_pathurlpatterns = [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, HttpResponsedef ajax1(request):return render(request, 'ajax1.html')def ajax2(request):user = request.GET.get('username')pwd = request.GET.get('password')import timetime.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" οnclick="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" οnclick="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>?
轉載于:https://www.cnblogs.com/CK85/p/10199074.html
總結
以上是生活随笔為你收集整理的Django中用Jquery实现不刷新页面进行身份验证和计算器功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CF662C Binary Table
- 下一篇： 洛谷P4315 月下“毛景树”