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. 把序列中的N个元素赋值给多个变量

    说明: python中序列和散列 序列:可通过偏移量来进行切片的对象.列表.元组.字符串都属于序列. 散列:无法通过偏移量来进行切片的对象.比如 集合.字典 一. 变量的数量跟序列元素的个数一样 1. ...

  2. PHP错误——Allowed memory size of 134217728 bytes exhausted (tried to allocate 32 bytes)

    解释是可用内存已耗尽,这关系到PHP的memory_limit的设置问题. 这里有两种方法解决 1.修改php.ini memory_limit = 128 打开终端输入下列bash命令 cd /pr ...

  3. Asp.net的生命周期应用之IHttpHandler

    摘自:http://www.cnblogs.com/JimmyZhang/archive/2007/09/15/894124.html Framework提供了一系列的接口和类,允许你对于Http请求 ...

  4. Oracle PL/SQL学习之基础篇（1）

    1.PL/SQL,全称Procedure Language/SQL,过程化sql语言 PL/SQL的程序结构 declare --声明部分(包括变量.光标.例外声明) begin --语句序列(DML ...

  5. datetime之 utcnow 和now的用法

    from datetime import datetime print(datetime.now()) 本地时间 print(datetime.utcnow()) 国际时间

  6. python socket文件传输实现

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

  7. Sql语句里的递归查询 SqlServer2005和Oracle 两个版本

    以前使用Oracle,觉得它的递归查询很好用,就研究了一下SqlServer,发现它也支持在Sql里递归查询举例说明:SqlServer2005版本的Sql如下:比如一个表,有id和pId字段,id是 ...

  8. DB2 Check Pending Script

    转载 http://www.zinox.com/archives/144 Thanks to Max Petrenko of DB2 Toronto Lab for sharing a very us ...

  9. 快速创建SpringBoot+SSM解析

    此处使用IDEA快速搭建SpringBoot应用,首先用SpringBoot搭建WEB工程: 然后点击Next生成项目,首次生成可能有点慢,下次创建的时候就会快很多,生成后的目录结构如下: 我们更改下 ...

  10. Path;Paths和Files;FileVisitor

    package filet; import java.io.FileOutputStream; import java.nio.file.FileStore; import java.nio.file ...