一、业务场景如下

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

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 base64def base64_encryption(data,salt = None): #base64加密if isinstance(data,str):if salt !=None and isinstance(salt,str):data  = salt+dataencry_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 resdef base64_decrypt(data,salt =None):  #base64解密if isinstance(data,str):if salt !=None and isinstance(salt,str):data  = salt+dataencry_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

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

django - ajax发送json格式请求相关推荐

Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
前后端传输数据的编码格式(contentType) get请求数据就是直接放在url?后面的 url?usernmae=junjie&password=123... 可以向后端发送post请求 ...
如何使用curl命令发送json格式请求体的post请求
需求如题,也看了一些博客,发现写的对新手都不太友好,总体上也满足不了我的需求,所以写了这篇博客总结一下.直接上完整的命令: curl 'http://192.168.50.253:50081/hosp ...
【PostMan】1、Postman 发送json格式请求
Postman 是一个用来测试Web API的Chrome 外挂软件,可由google store 免费取得并安装于Chrome里,对于有在开发Web API的开发者相当有用,省掉不少写测试页面呼叫的 ...
jsp怎么接受ajax请求参数,通过ajax发送JSON并通过JSP中的请求获取参数
我需要通过ajax(使用Jquery)发送JSON对象,并通过JSP(服务器端)中的请求对象获取所有参数.通过ajax发送JSON并通过JSP中的请求获取参数我的JS代码: var request ...
HTTP get请求发送JSON格式数据
get请求一般不建议发送JSON格式的数据,单总有一些奇葩系统要求分享下本人对接途牛传递get请求 json数据的方法第一步:平常的get请求不要想了直接继承 import org.apach ...
html js发送http请求数据格式,JS获取url参数,JS发送json格式的POST请求方法
一.获取url所有参数值 function US() { var name, value; var str = location.href; var num = str.indexOf("? ...
java后台解析json并保存到数据库_[Java教程]ajax 发送json 后台接收遍历保存进数据库...
[Java教程]ajax 发送json 后台接收遍历保存进数据库 0 2017-09-25 15:00:23 前台怎么拿参数的我就不管了我也不会反正用这个ajax没错 ajax 代码一定要写 ...
Ajax 提交json格式数据给后台
Ajax 提交json格式数据在实际的开发当中,尤其是在前后端分离的项目中,传输数据都是以json格式进行传输的,所以对于json格式数据的情求和响应的学习十分重要. 1.前端提交json格式数据 ...
php 接收curl json数据格式,curl发送 JSON格式POST数据的接收，以及在yii2框架中的实现原理【精细剖析】...
1.通过curl发送json格式的数据,譬如代码: function http_post_json($url, $jsonStr) { $ch = curl_init(); curl_setopt($ ...

django - ajax发送json格式请求