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. 人工鱼群算法超详细解析附带JAVA代码

    01 前言 本着学习的心态,还是想把这个算法写一写,给大家科普一下的吧. 02 人工鱼群算法 2.1 定义 人工鱼群算法为山东大学副教授李晓磊2002年从鱼找寻食物的现象中表现的种种移动寻觅特点中得到 ...

  2. HDU - 3085 Nightmare Ⅱ

    HDU - 3085 Nightmare Ⅱ 双向BFS,建立两个队列,让男孩女孩一起走 鬼的位置用曼哈顿距离判断一下,如果该位置与鬼的曼哈顿距离小于等于当前轮数的两倍,则已经被鬼覆盖 #includ ...

  3. 我永远喜欢我的偶像 KIKU

  4. 新人须知的网站文件和MySQL数据库备份流程思路

    昨天老左再次遇到一个网友告知使用的一台服务器自己无意中点击主机商面板的导致服务器被重新安装系统(居然这也可以),问问是否可以恢复数据.这个同学和之前遇到好几次的网友真相似,从开始购买服务器,到自己网站 ...

  5. HQL的使用和limit的替代

    1.HQL不同于SQL,from必须是项目中table反转后对应的class的名字. 2.如何使用参数生成HQL语句: String hql = "from User where userI ...

  6. Linux网络编程案例分析

    本代码来自于博主:辉夜星辰 本篇主要对运行代码中出现的问题进行分析,代码本身的内容后续展开讨论. 服务器端代码 /* Linux网络编程之TCP编程,服务器端读数据 socket函数之后,返回值ser ...

  7. dubbo学习笔记:快速搭建

    搭建一个简单的dubbo服务 参考地址: dubbo官网:http://dubbo.apache.org/zh-cn/docs/user/references/registry/zookeeper.h ...

  8. Mac下配置Java Web开发环境（Mac 10.12）

    1.JDK http://www.cnblogs.com/EasonJim/p/6277541.html 2.MySQL http://www.cnblogs.com/EasonJim/p/62758 ...

  9. 新创建的数据库，执行db2look时，遇到package db2lkfun.bnd bind failed

    在新创建的数据库中,执行db2look的时候,存在这样的问题 db2v97i1@oc0644314035 ~]$ db2look -d sample -e -l -o db2look.ddl -- N ...

  10. (转)zabbix之生产案例

    原文: https://www.abcdocker.com/abcdocker/category/zabbix/ 原文: https://chegva.com/1170.html