Django向后台传送用户名和密码

                                                                   Django向后台传送用户名和密码

在前面的一个博客里面，我仔细的给出了django的安装，配置以及第一个hello world程序，然而做一个网站，仅仅有这个是不够的，至少需要你能够传输一些数据到后台，然后再考虑其他的。由于博主暂时新学这个框架，数据库这一块暂时不归博主负责，所以在目前的介绍中，暂时不会与数据库进行连接，之后会再进行整合，给出全部代码。目前的所有数据，直接先自己编造。

博主现在建立了一个项目，名字为softEn(博主是个取名废),建立了一个APP，叫做cmdb,所有的函数暂时全部在views文件里面，在templates里面放的是html文件，自己新建了一个static文件，用来存放js代码和要显示的图片，

这个测试要得到的界面图形如下(漂亮妹子镇楼)：

要求用户输入用户名和密码，然后提交之后可以刷新界面，得到当前已经得到的用户名和密码。

首先，我使用的的form表格提交，但是，我随后发现，使用这个方法在后台根本获取不到数据，连着试了2天都没找到原因，最后采用了ajax传输。ajax使用起来非常方便，它有固定的格式，稳定的异步刷新机制，用起来还是非常舒服的。现在初步了解一下ajax：附上百度百科链接https://baike.baidu.com/item/ajax/8425?fr=aladdin 传统的与服务器交互机制需要进行整个页面的刷新，现在使用ajax技术之后，只会对页面中的部分信息进行刷新，异步数据传输使得网页从服务器上取得更少的数据，而不再是整个界面。ajax使得因特尔程序更小，与用户交互更快。Jquery中使用ajax非常简单，使用$.ajax({ })来进入ajax模块。

$.ajax({ url:"/index/", type:"POST", data:{ a:user, b:password }, success:function (data) { }， })

url需要的是数据要送往的处理函数的地方。在django里面，所有的url配置都在urls.py里面，这个值应该是那个函数所在的路径，比如说我新建了一个path：path('index/', cmdb_views.index,name='index'),我要处理数据的函数就是这个cmdb（我的APP名）的views.py文件里面的index函数，第一个路径名就是我要在ajax里面填写的路径名。在urls里面进行修改的同时，在ajax里面也要进行修改。

关于数据从后台返回并在前端显示的方式有两种，一种需要刷新整个界面，另一种则符合ajax不需要刷新界面。

方法一：

<tbody> {% for line in data %} <tr> <td>{{ line.user }}</td> <td>{{ line.pwd }}</td> </tr> {% endfor %} </tbody>

这一种方式需要在ajax里面的success添加一个刷新界面的语句：location.reload(true);将上面的代码放在html文件里面想要显示表格的地方。这个方法在后台的的代码如下：

from django.shortcuts import render data_lines=[] def index(request): if request.POST: print("开始进入数据") username = request.POST.get("a",None) password = request.POST.get("b",None) print(username,password) temp = {'user':username,'pwd':password} data_lines.append(temp) return render(request, "mainPage.html", {'data':data_lines})

在这里，我的前端界面叫mainPage.html，传输过去的data数据是一个list类型，如data_lines=[{'user':'张三','pwd':'123456'},{'user':'张四','pwd':'653643'}]传输到前面名为data，{% for line in data %}是循环取data里面的数据，{{ line.user }}是取到里面key是user的value值。

但是这个方法需要刷新整个界面，而且有一些判断的数据，比如在后台没有取到时会返回字符串之类的就不好使用了，所以我想把数据以json的格式返回到jquery里面，然后用jq将这个进行相应的操作显示，得到的就是方法二。

方法二：将处理得到的数据返回给jq，然后再不用刷新页面显示在前端

HTML文件： 建一个表格，一个id，方便找到这个位置 <tbody id="re_new">   </tbody>   //全部网页代码 <h1 style="color: deepskyblue">Hello,这是一个专用的测试界面</h1> <span style="float: left"><img src="../static/img/08.jpg" style="height: 400px;width: 300px"></span> <span style="float: left;margin-left: 80px;width: 150px">     <h1>用户输入：</h1> <from> name:<input type="text" name="usr" id="usr"> password:<input type="password" name="pwd" id="pwd"> <button type="submit" id="sub">提交</button> </from>   <hr /> <h1>用户展示</h1> <table border="1"> <thead> <th>用户名：</th> <th>密码:</th> </thead> <tbody id="re_new">   </tbody> </table> </span> <script src="../static/js/jquery-3.3.1.min.js"></script>     jquery代码：首先自己需要引入jq文件，网上都有下载   <script> $(document).ready(function(){ $("#sub").on("click",function ({}) { //按下按钮 var user = $("#usr").val(); var password = $("#pwd").val(); $.ajax({ url:"/index/", type:"POST", data:{ a:user, b:password }, success:function (data) { $('#usr').val('');//清空输入框的值 $('#pwd').val(''); $.each(data,function (i,item) { var strs = '<td>'+item['user']+'</td>'+'<td>'+item['pwd']+'</td>'; $('#re_new').append('<tr>'+strs+'</tr>'); }) } }) }) }) </script>

urls里面的配置：

path('index/', cmdb_views.index,name='index'),

views里面文件的处理：

data_lines=[] //数据暂时虚构，没有和数据库交互 def index(request): if request.POST: print("开始进入数据") username = request.POST.get("a",None) password = request.POST.get("b",None) print(username,password) temp = {'user':username,'pwd':password} data_lines.append(temp) return JsonResponse(data_lines,safe=False)

如果有什么问题，可以与博主联系。