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) |
如果有什么问题,可以与博主联系。