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测试开发django-51.Ajax发送post请求登录案例的更多相关文章
- python测试开发django-26.表单提交之post登录案例
前言 注册和登录功能实现都是post请求接口,只不过注册是往数据库插入数据,登录是从数据库里面查询数据. 本篇接着上一篇写个简单的登录页面请求,用户注册时密码加密存储,用户登录时候对输入的密码校验. ...
- Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...
- Django中ajax发送post请求，报403错误CSRF验证失败解决办法
今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...
- python测试开发django-25.表单提交之post注册案例
前言 一个网站上新用户注册,会写个注册页面,如果用django写个注册页面的流程呢? 本篇以post请求示例,从html页面上输入用户注册信息,提交到后台处理数据,然后传参数据到User数据库表里面 ...
- Django用ajax发送post请求时csrf拦截的解决方案
把下面的代码写在模版文件中就可以了, 注:不是js文件,是模版文件加载的执行的,所有写js里没效果 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf ...
- python测试开发django-36.一对一(OneToOneField)关系查询
前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...
- python测试开发django-16.JsonResponse返回中文编码问题
前言 django查询到的结果,用JsonResponse返回在页面上显示类似于\u4e2d\u6587 ,注意这个不叫乱码,这个是unicode编码,python3默认返回的编码 遇到问题 接着前面 ...
- python测试开发django-15.查询结果转json(serializers)
前言 django查询数据库返回的是可迭代的queryset序列,如果不太习惯这种数据的话,可以用serializers方法转成json数据,更直观 返回json数据,需要用到JsonResponse ...
- 2019第一期《python测试开发》课程，10月13号开学
2019第一期<python测试开发>课程,10月13号开学! 主讲老师:上海-悠悠 上课方式:QQ群视频在线教学,方便交流 本期上课时间:10月13号-12月8号,每周六.周日晚上20: ...
随机推荐
- Python_subprocess模块
subprocess中,允许生成新的进程,连接到input/output/error管道,并获取他们的返回(状态)码,主要用于替换os.system/os.spawn*几个旧的模块和方法 subpro ...
- sparkStreaming运行yarn，提交任务报错
op.yarn.server.nodemanager.containermanager.launcher.ContainerLaunch.call(ContainerLaunch.java:302) ...
- scrapy 基础使用以及错误方案
原先用的是selenium(后面有时间再写),这是第一次使用scrapy这个爬虫框架,所以记录一下这个心路历程,制作简单的爬虫其实不难,你需要的一般数据都可以爬取到. 下面是我的目录,除了main.p ...
- kmp基础 ekmp
+]; int lenp,lens; +];//可以是char 也可以是string +]; void getnext() { nex[]=-; ,j=; ) { ||p[j]==p[k]) nex[ ...
- Manager解决Process进程之间的数据访问
import multiprocessing mgr = mutiprocessing.Manager() 开启一个守护子进程,并返回用来与其通信的管理器 share_list = mgr.list( ...
- gradle3.0新命令
摘抄原文https://mp.weixin.qq.com/s/6UZhaI9cILJiPGYHkXd73g No1: Implementation compile 指令被标注为过时方法,而新增了两个依 ...
- poj 3685 Matrix 【二分】
<题目链接> 题目大意: 给你一个n*n的矩阵,这个矩阵中的每个点的数值由 i2 + 100000 × i + j2 - 100000 × j + i × j 这个公式计算得到,N( ...
- 打印星星 - Python
打印星星是经典面试题目,考察流程控制中的循环和条件.本文对相关方法进行总结. 到的方法只要有(1)嵌套循环(2)center(3)format(^)(4)字符串乘法 # -*- coding:utf- ...
- FTP传输协议的应用详解
FTP的目标:1)促进程序.数据文件按的共享;2)鼓励使用远程计算机;3)使用户不必面对不同主机上不同文件系统的差异;4)对数据进行高效可靠的传输FTP的作用:就是让用户连接上一个远程计算机,察看远程 ...
- rock-paper-scissors
rock-paper-scissors维护三个前缀和,然后注意顺序,最后做差来确定可行的答案,因为答案比较小,可以考虑这种暴力做法,像这种方案数可以++的题真的不多,如果想不出来特别优秀的想法,不妨简 ...