python测试开发django-51.Ajax发送post请求登录案例
前言
我想实现一个登录功能：登录的接口是另外一个地方提供，页面上点登录按钮的时候，先访问登录接口，根据接口返回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自动化交流QQ群：779429633