django - ajax发送json格式请求

一、业务场景如下

很简单，哥就想实现一个登录，你去实现吧，那提到这个，我们会想到以下几点

1、前台，我要做一个登录业面

2、然后发送一个ajax请求

3、用户名密码一定是个表单，表单提交那是一个post请求

4、用户名能忍，密码很重要，总不能明文传输吧，得加个密

5、这个也不能赤果果的放在url后面传吧，所以，form表单的post请求方式明显不合格，我们试试用数据传输，从用户名密码的角度，这明显是个字典格式，那我们就传个json吧

6，前台定好了，还要后端的接口，处理发过来的用户名密码

二、在这之前，我们先了解几个小业务

1、密码加密，我们采用一个随机的3位数字+密码，然后进行base64加密的方式传输，jquery实现是这样的

（1）首先生成三位随机数字

            var num = '';
            for (var i = 0; i < 3; i++) {
                num += Math.floor(Math.random() * 10);
            }

（2）完成base64加密

先引入两个jquery的包，记住前面的static是我自己的静态文件路径，你要写你的

<script src={% static "jquery-3.6.0.min.js" %}></script>
<script src={% static "jquery.base64.js" %}></script>


加上上面的随机数代码，总体是这样的

 var num = '';
 for (var i = 0; i < 3; i++) {
                num += Math.floor(Math.random() * 10);
    }
 var password = $.base64.encode(num+data.field.password);

 如果你不想知道static咋来的，看看这个文章吧

django_layui+jquery+token实现平台的登录_分享自己浅浅的知识-CSDN博客一、我们现在做一个登录页面1、layui ：前端开发框架，类似vue2、jquery：js代码二、layui的静态资源引用layui静态资源下载：Layui - 经典开源模块化前端 UI 框架image.png三、下载js静态资源https://code.jquery.com/jquery-3.6.0.min.js打开后不要害怕，你没看错image.png点击右键，另存为就行了四、django中加载layui和js的静态资源在项目的根目录下建一个 shttps://blog.csdn.net/weixin_43258703/article/details/121448595

 三、ajax发送json

   $.ajax({
                type: "POST",
                url: "/login/do_login/",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({"username": data.field.username, "password": password}),
                success: function (result) {
                    if (result.error_code == 0) {
                        layer.msg(result.msg, {time: 3000}, function () {
                            window.location.href = "/login/index/";
                        });
                    } else {
                        layer.msg(result.msg, {time: 3000})
                    }

                },
                error: function () {
                    alert("提交失败");
                }
            });

三、加上form表单的完整请求如下

        form.on('submit(login)', function (data) {
            #生成base64字符串
            var num = '';
            for (var i = 0; i < 3; i++) {
                num += Math.floor(Math.random() * 10);
            }
            var password = $.base64.encode(num+data.field.password);
            console.log(password)

          
            #发ajax请求，记得data一定要用JSON.stringify
            $.ajax({
                type: "POST",
                url: "/login/do_login/",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({"username": data.field.username, "password": password}),
                success: function (result) {
                    if (result.error_code == 0) {
                        layer.msg(result.msg, {time: 3000}, function () {
                            #如果登录成功，则一个get请求跳转到首页
                            window.location.href = "/login/index/";
                        });
                    } else {
                        layer.msg(result.msg, {time: 3000})
                    }

                },
                error: function () {
                    alert("提交失败");
                }
            });
            return false;
        });

四、后端怎么接受请求

1、接收请求：

这里我截出接收，知道request的值，剩下的都是你自己的逻辑操作，就不截了，省得看着眼花

2、关于python的base64 加密解密，我封装好的函数如下

import base64

def base64_encryption(data,salt = None): #base64加密
    if isinstance(data,str):
        if salt !=None and isinstance(salt,str):
            data  = salt+data
        encry_data  = base64.b64encode(bytes(data,encoding="utf-8"))
        result = str(encry_data,encoding="utf-8")
        res = {"error_code": 0, "msg":result}
    else:
        res = {"error_code":1,"msg":"传入的不是字符串"}
    return res

def base64_decrypt(data,salt =None):  #base64解密
    if isinstance(data,str):
        if salt !=None and isinstance(salt,str):
            data  = salt+data
        encry_data  = base64.b64decode(bytes(data,encoding="utf-8"))
        result = str(encry_data,encoding="utf-8")
        res = {"error_code": 0, "msg":result}
    else:
        res = {"error_code":1,"msg":"传入的不是字符串"}
    return res

 以上就是全过程，学废了没