前言

我想实现一个登录功能：登录的接口是另外一个地方提供，页面上点登录按钮的时候，先访问登录接口，根据接口返回json信息判断是否登录成功，登录成功页面跳转，登录不成功，在登录首页显示失败原因

登录页

写个简单的登录页面，页面上添加一个点击区域方便调试代码：<p id="aj">点这里调试ajx</p>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

     <div style="margin: 15% 40%;">

        <h1>欢迎登录！</h1>

       <form action="/login_json/" method="post">

           {% csrf_token %}

            <p>

                <label for="id_username">用户名：</label>

                <input type="text" id="id_username" name="username" placeholder="用户名" autofocus required />

            </p>

            <p>

                <label for="id_password">密码：</label>

                <input type="password" id="id_password" placeholder="密码" name="password" required >

            </p>

            <p style="color:red" id="msg">

                {{msg}}

            </p>

            <input type="submit" id="button" value="确定">

       </form>

         <p id="aj">点这里调试ajx</p>

         <br><br>

    </div>

</body>

</html>

登录接口基本信息如下：

登录接口地址：/login_json/

请求方式：post

请求body参数("Content-Type","application/x-www-form-urlencoded; charset=UTF-8")：

  • "username":从页面输入框获取
  • "password":从页面输入框获取
  • "csrfmiddlewaretoken": 页面随机生成的隐藏参数，从页面上name="csrfmiddlewaretoken"获取value值

返回数据（json格式）：

  • 成功：{'status': "1", "msg": "success!"}
  • 失败：{'status': "0", "msg": "账号或密码不对"}

获取页面上请求参数

先把数据从页面上抓取出来，定义三个变量，后面post请求好传值

$('#aj').click(function(){

    var name = $("#id_username").val();

    var psw = $("#id_password").val();

    var token = $('[name="csrfmiddlewaretoken"]').attr("value");

    alert("name:"+name+"\n"+"psw:"+psw+"\n"+"token:"+token)

  });

调试结果

发post请求

// 作者：上海-悠悠

$('#aj').click(function(){

    var name = $("#id_username").val();

    var psw = $("#id_password").val();

    var token = $('[name="csrfmiddlewaretoken"]').attr("value");

    $.post("/login_json/",

    {

        "username":name,

        "password":psw,

        "csrfmiddlewaretoken": token,

    },

        function(result){

        alert("返回数据: \n" + "status:"+ result.status +"\n"+"msg:"+ result.msg);

    });

  });

页面跳转

jQuery实现页面跳转的几种方法:

  • 1.我们可以利用http的重定向来跳转

window.location.replace("https://www.cnblogs.com/yoyoketang/");

  • 2.使用href来跳转

window.location.href = "https://www.cnblogs.com/yoyoketang/";

  • 3.使用jQuery的属性替换方法

$(location).attr('href', 'https://www.cnblogs.com/yoyoketang/');

$(window).attr('location','https://www.cnblogs.com/yoyoketang/);

$(location).prop('href', 'https://www.cnblogs.com/yoyoketang/')

$('#aj').click(function(){

    var name = $("#id_username").val();

    var psw = $("#id_password").val();

    var token = $('[name="csrfmiddlewaretoken"]').attr("value");

    $.post("/login_json/",

    {

        "username":name,

        "password":psw,

        "csrfmiddlewaretoken": token,

    },

        function(result){

         if (result.status == "1") {

               window.location.href = "/xadmin/";   //页面成功跳转

            } else {

               $("#msg").text(result.msg)          //页面失败显示提示语

           }

    });

  });

当登录失败的时候，直接在页面上id="msg"的p标签写一个文本： $("#msg").text(result.msg)

最终html

加个if判断，当页面上username和password为空的时候不提交请求

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>登录</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

$(document).ready(function() {

        $('#button').click(function(){

    var name = $("#id_username").val();

    var psw = $("#id_password").val();

    var token = $('[name="csrfmiddlewaretoken"]').attr("value");

    if (name && psw ){

                $.post("/login_json/",

                        {"username":name,

                        "password":psw,

                        "csrfmiddlewaretoken": token

                         },

                    function(result){

                     if (result.status == "1") {

                           window.location.href = "/xadmin/";   //页面成功跳转

                        } else {

                           $("#msg").text(result.msg)          //页面失败显示提示语

                       }

                });

    }

  });

 })

    </script>

</head>

<body>

     <div style="margin: 15% 40%;">

        <h1>欢迎登录！</h1>

       <form action="/login_json/" method="post">

           {% csrf_token %}

            <p>

                <label for="id_username">用户名：</label>

                <input type="text" id="id_username" name="username" placeholder="用户名" autofocus required />

            </p>

            <p>

                <label for="id_password">密码：</label>

                <input type="password" id="id_password" placeholder="密码" name="password" required >

            </p>

            <p style="color:red" id="msg">

                {{msg}}

            </p>

       </form>

         <input type="submit" id="button" value="确定">

         <p id="aj">点这里调试ajx</p>

         <br><br>

    </div>

</body>

</html>

最后把“确定”按钮放到form表单外面了，要不然会重复发请求了

ajax方式

使用 $.ajax()方式

$("#aj").click(function() {

        var name = $("#id_username").val();

        var psw = $("#id_password").val();

        var token = $('[name="csrfmiddlewaretoken"]').attr("value");

        if (name && psw ){

                $.ajax({

                    "url" : "/login_json/",    //提交URL

                    "type" : "Post",//处理方式

                    "data" : {

                                "username":name,

                                "password":psw,

                                "csrfmiddlewaretoken": token,

                            },//提交的数据

                    "dataType" : "json",   //指定返回的数据格式

                    "success" : callback,  //执行成功后的回调函数

                    "async" : "false",//是否同步

                    //错误后执行

                    "error" : function() {

                         $("#msg").text(result.msg)          //页面失败显示提示语

                    }

                });

        }

        function callback(result) {

            if (result.status == "1") {

                           window.location.href = "/xadmin/";   //页面成功跳转

                        } else {

                           $("#msg").text(result.msg)          //页面失败显示提示语

                       }

        }

    })

python测试开发django-51.Ajax发送post请求登录案例的更多相关文章

  1. python测试开发django-26.表单提交之post登录案例

    前言 注册和登录功能实现都是post请求接口,只不过注册是往数据库插入数据,登录是从数据库里面查询数据. 本篇接着上一篇写个简单的登录页面请求,用户注册时密码加密存储,用户登录时候对输入的密码校验. ...

  2. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  3. Django中ajax发送post请求，报403错误CSRF验证失败解决办法

    今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...

  4. python测试开发django-25.表单提交之post注册案例

    前言 一个网站上新用户注册,会写个注册页面,如果用django写个注册页面的流程呢? 本篇以post请求示例,从html页面上输入用户注册信息,提交到后台处理数据,然后传参数据到User数据库表里面 ...

  5. Django用ajax发送post请求时csrf拦截的解决方案

    把下面的代码写在模版文件中就可以了, 注:不是js文件,是模版文件加载的执行的,所有写js里没效果 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf ...

  6. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  7. python测试开发django-16.JsonResponse返回中文编码问题

    前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...

  8. python测试开发django-15.查询结果转json(serializers)

    前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...

  9. 2019第一期《python测试开发》课程，10月13号开学

    2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...

随机推荐

  1. Java中常见的排序方式-冒泡排序(升序)

    [基本思想] 假设数组为int[] a = { 49, 38, 65, 97, 76, 13, 27 },数组元素个数为7个. 第1轮比较:先是a[0]与a[1]比较,大于则先交换,再比较a[1]和a ...

  2. 数据库构架设计中的Shared Everthting、Shared Nothing、和Shared Disk

    Shared Everthting:一般是针对单个主机,完全透明共享CPU/MEMORY/IO,并行处理能力是最差的,典型的代表SQLServer Shared Disk:各个处理单元使用自己的私有 ...

  3. 007 numpy数组文件的存取

    不知道这个有没有用,都整理了一番. 一:数组以二进制格式进行存储 1.说明 np.save与np.load是读写磁盘数组数据的两个重要函数. 默认情况下,数组以压缩的原始二进制格式保存在扩展名为npy ...

  4. TensorFlow卷积层-函数

    函数1:tf.nn.conv2d是TensorFlow里面实现卷积的函数,实际上这是搭建卷积神经网络比较核心的一个方法 函数原型: tf.nn.conv2d(input,filter,strides, ...

  5. hdu 3499 flight 【分层图】+【Dijkstra】

    <题目链接> 题目大意: 现在给你一些点,这些点之间存在一些有向边,每条边都有对应的边权,有一次机会能够使某条边的边权变为原来的1/2,求从起点到终点的最短距离. 解题分析: 分层图最短路 ...

  6. CodeForces 371C Hamburgers（经典）【二分答案】

    <题目链接> 题目大意: 给以一段字符串,其中只包含"BSC"这三个字符,现在有一定量免费的'B','S','C‘,然后如果想再买这三个字符,就要付出相应的价格.现在总 ...

  7. 动手创建 SSD 目标检测框架

    参考:单发多框检测(SSD) 本文代码被我放置在 Github:https://github.com/XinetAI/CVX/blob/master/app/gluoncvx/ssd.py 关于 SS ...

  8. Hessian的使用以及理解

    官网 http://hessian.caucho.com/ Hessian的使用以及理解Hessian版本:3.1.5将包括如下的内容: Hessian的基本使用Hessian的原理Hessian和S ...

  9. 使用IntelliJ Idea新建SpringBoot项目

    简单给大家介绍一下我来创建SpringBoot项目使用的工具,本人使用IntelliJ Idea来创建项目,利用其中的Spring Initializr工具来快速创建项目. 步骤如下: 菜单栏中选择F ...

  10. 记录下这几天使用 GitHub 碰到的问题

    1.在 GitHub 上为新项目创建一个库时,默认是不使能主页功能的 如果你想要使用 GitHub 的主页功能做一个博客或一份简历,需要人为设置一下.如下图: 制作简历,这里有一份更详细的参考:如何在 ...