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. time 模块学习

    前情提要: time模块是经常使用的模块.主要是用来记录时间,以及时间上的相关操作 一:时间戳 1:第一种形式 import time print(time.time()) 从1970 1 1 0:0 ...

  2. python基础知识梳理----6set 集合的应用

    集合内容简介: set 一: 集合简介 集合set集合是python的一个基本数据类型.一般不是很常用set.中的元素是不重复的.无序的.里里面的元素必须是可hash的tuple,bool),str, ...

  3. docker 运行容器时为容器起别名

    docker run --name=mydemo -p  -d 2222:80 imagename --name: 指定容器名称 -p:指定容器端口号 -d:指定容器后台运行

  4. 2018焦作网络赛 - Poor God Water 一道水题的教训

    本题算是签到题,但由于赛中花费了过多的时间去滴吧格,造成了不必要的浪费以及智商掉线,所以有必要记录一下坑点 题意:方格从1到n,每一格mjl可以选择吃鱼/巧克力/鸡腿,求走到n格时满足 1.每三格不可 ...

  5. excel 快速填充所有非连续空白单元格

    工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法.       工具/原料 EXCEL 方法/步骤   首先选中你要填充的区域,   按“F5"或者 Ctrl + ...

  6. Orleans框架------基于Actor模型生成分布式Id

    一.Actor简介 actor模型是一种并行计算的数学模型. 响应于收到的消息,演员可以:做出决定,创建更多Actor,发送更多消息,并确定如何响应接收到的下一条消息. 演员可以修改自己的状态,但只能 ...

  7. Sublime 必知必会（持续更新）

    1.格式化代码 Edit - Line - Reindent(中文路径则是:编辑 - 行 - 再次缩进) 2.分屏显示 view-layout-Columns:2(中文路径则是:查看 - 布局 - 列 ...

  8. hibernate_annotation字段映射位置

    @Id private int id; private String name; private String wifeName; private Date birthDate; //Title是En ...

  9. javascript语言使用技巧及注意事项总结

    1.首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新的全局变量,要尽量避免使用全局变量. var a=b=10;//其中a是局部变量,b是全局变量 2.使用===比= ...

  10. 四大组件之Activity Task任务栈4种启动模式

    1.启动模式 standard,创建一个新的Activity. singleTop,栈顶不是该类型的Activity,创建一个新的Activity.否则,onNewIntent. singleTask ...