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. 结合业务，精炼SQL

    现代网站,性能的瓶颈都围绕着数据库的性能来谈.数据库是存储的核心部件,在日益增长的流量中会凸显数据库的性能瓶颈.从<淘宝技术十年>书中来看,淘宝发展历程中从MYSQL换成了ORACLE又换 ...

  2. RN 中 Native 模块的注入过程

    找到所有的模块 一般来说,只要在模块中声明 RCT_EXPORT_MODULE 即可.这是个宏,展开后是声明了一个函数,定义了两个函数,如下所示. #define RCT_EXPORT_MODULE( ...

  3. leetcode-77-组合

    题目描述: 给定两个整数 n 和 k,返回 1 ... n 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2,4], [3,4], [2,3], [1,2], ...

  4. 如何给oneindex网盘增加评论、密码查看、read me,头提示功能。

    来自我的博客:www.resource143.com 微信公众号:资源库resource 视频教程地址 点击查看 评论功能 特性 使用 GitHub 登录 支持多语言 [en, zh-CN, zh-T ...

  5. c# 操作excle[转]

    //引用Microsoft.Office.Interop.Excel.dll文件 //添加using using Microsoft.Office.Interop.Excel; using Excel ...

  6. Web安全之CSRF攻击的防御措施

    Web安全之CSRF攻击的防御措施   CSRF是什么? Cross Site Request Forgery,中文是:跨站点请求伪造. CSRF攻击者在用户已经登录目标网站之后,诱使用户访问一个攻击 ...

  7. underscore相关记录

    为什么使用void 0代替undefined? 在很多框架的源码以及webpack打包出来的bundle.js中,我们都可以看到void 0的身影,如下: function generateRando ...

  8. RabbitMQ初学之一:exchange与queue的绑定

    最近公司需要使用RabbitMQ,但我之前一直使用的是ActiveMQ,对RabbitMQ进行了初步的学习,但是还不系统,自己做了一些小测试,怕自己以后忘了 一. 背景 拿到代码以后,发现,生产者在向 ...

  9. JDBC处理Transaction

    package com.ayang.jdbc; import java.sql.*; /** * transaction的构成,随便写一句insenrt,一执行executeUpdate(),它自动提 ...

  10. 【html5】cookie、sessionStorage、localStorage

    第四条补充:      cookie中包含domain和path,所有向该域下该路径发送的请求头部都会包含这个cookie:      session浏览器关闭后消失,只能由最初给对象存储数据的页面访 ...