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" ο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
相关资源：数据结构—成绩单生成器