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>

Django中用Jquery实现不刷新页面进行身份验证和计算器功能的更多相关文章

  1. jQuery实现局部刷新页面数据绑定

    今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下? 试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问 ...

  2. ASP.Net中无刷新执行Session身份验证

    在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的 ...

  3. Javascript刷新页面的八种方法

    /** * Javascript刷新页面的八种方法 * 说明一下,jQuery没有发现刷新页面的方法. */ 1 history.go(0) 2 location.reload() 3 locatio ...

  4. js 如何刷新页面

    Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...

  5. django使用email进行身份验证(转载)

    版权所有,转载请注明出处:http://guangboo.org/2013/03/27/authentication-using-email-in-django django自带的验证功能免去了我们的 ...

  6. jquery mobile页面跳转后，必须重新刷新页面js方可有效

    最近在做个项目,用到jquery mobile,很陌生对他,问题一个个的来,那就要一个个解决,找了一天这个问题,放可明白:首先明白jqm里面页面跳转默认都是通过ajax请求的,必须重新刷新页面js方可 ...

  7. AJAX JQuery 调用后台方法返回值（不刷新页面）

    AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () {             //无 ...

  8. jQuery实现发送验证码30s倒计时，且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  9. 使用jquery结合ajax做下拉刷新页面，上拉加载页面，俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. Android服务重启

    现在有这样的需求,防止自己的app被其他的应用程序(比如qq手机管家)杀死,该怎么实现呢.我们知道app都是运行在进程中的,android是怎样管理这些进程的呢.要想app不被杀死,只要做到进程不被结 ...

  2. 常用的re正则

    常用的正则表达式: 用户名:/^[a-z0-9_-]{3,16}$/ 密码:/^[a-z0-9_-]{6,18}$/ 十六进制值:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮 ...

  3. spark中资源调度任务调度

    在spark的资源调度中 1.集群启动worker向master汇报资源情况 2.Client向集群提交app,向master注册一个driver(需要多少core.memery),启动一个drive ...

  4. Sci-Hub

    提到Sci-Hub这个文献下载利器,大家肯定都不陌生.你在各大SCI杂志上看到的英文文献,90%以上都能免费下载.因为它严重侵犯了爱思唯尔.施普林格.Wiley等各大出版商的利益,遭到起诉与封杀. 不 ...

  5. HDU 4508 湫湫系列故事——减肥记I

    原题链接:点击此处 解题思路: 思路与01背包差不多,思路用二维数组表示: dp[i][v]=max{dp[i-1][v-k*b[i]]+k*a[i]|0<=k*b[i]<=v} 其dp( ...

  6. python socket文件传输实现

    简单版 server(服务端) import socket import subprocess import struct import json import os share_dir = r'E: ...

  7. python 进程与线程（理论部分）

    一.理论部分 一 什么是进程 进程:正在进行的一个过程或者说一个任务.而负责执行任务则是cpu. 举例(单核+多道,实现多个进程的并发执行): egon在一个时间段内有很多任务要做:python备课的 ...

  8. java翻译到mono C#实现系列(4) 利用CountDownTimer类实现倒计时功能 mono版

    群里的朋友问利用CountDownTimer类实现倒计时功能怎么实现,我就百度了,参考http://blog.csdn.net/qq344429461/article/details/7521361写 ...

  9. DB2 close auto commit

    db2 关闭命令行CLP自动提交 --临时关闭自动提交 #db2 "update command options using C off --永久关闭自动提交 ----linux 环境下 # ...

  10. Spring Boot的filter简单使用

    过滤器(Filter)的注册方法和 Servlet 一样,有两种方式:代码注册或者注解注册 1.代码注册方式 通过代码方式注入过滤器 @Bean     public FilterRegistrati ...