以下是我的代码，我利用ajax实现数据的传递给后端，额咯为什么现在点击登录按钮后页面不跳转
前端代码
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1,user-scalable=no">
<title>登录</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css'%}">
<link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css'%}">
<link rel="stylesheet"
href="{% static 'plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css'%}">
</head>
<body>
<div class="account">
<h2 style="margin-top:0">用户登录</h2>
<form id="smsForm" method="POST" style="margin-top:20px;" novalidate>
{% csrf_token %}
{% for field in form %}
{% if field.name == 'code' %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
<div class="clearfix">
<div class="col-md-6" style="padding:0;">{{field}}
<span class="error-msg" style="color:red;position:absolute"></span></div>
<div class="col-md-6"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
</div>
<span class="error-msg" style="color:red;position:absolute"></span>
</div>
{% else %}
<div class="form-group" style="margin-top:20px;">
<label> {{ field.label}}</label>
{{field}}
<span class="error-msg" style="color:red;position:absolute"></span>
{% endif %}
{%endfor%}
<input id="btnSubmit" style="height:35px;width:200px; margin-left:90px; font-size:17px;" type="button" value="登录"
class="btn btn-info">
<div>
<span style="float: right; margin-top:20px;">已有账号.<a style=" text-decoration:none;" href=" ">去登录</a ></span>
</div>
</div>
</form>
</div>
<script src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js'%
//页面加载完自动执行函数
$(function(){
bindClickBtnSms();
bindClickSubmit();
});
//点击提交登录
function bindClickSubmit() {
$('#btnSubmit').click(function(){
$(".error-msg").empty();
//收集数据
//发送到后台
$.ajax({
url:"/login1/",
type:"POST",
data:$('#smsForm').serialize(),
dataType:"JSON",
success:function(res){
if(res.success){
location.href=res.data;
}else{
//错误信息
$.each(res.error,function(key,value){
$('#id_'+key).next().text(value[0]);
})
}
}
})
})
}
//点击获取验证码的按钮绑定事件
function bindClickBtnSms(){
$('#btnSms').click(function(){
//获取用户输入的手机号
var mobile=$('#id_mobile').val();
$.ajax({
url:"/send/sms/",
type:"GET",
data:{mobile: mobile,tpl: "login"},
dataType: 'json',
success:function(res){
//ajax请求发送成功后，自动执行函数
if (res.status){
sendSmsRemind();
}else{
//错误信息
$.each(res.error,function(key,value){
$('#id_'+key).next().text(value[0]);
})
}
},
error:function(xhr,status,error){
console.log('ajax请求失败:'+error)}
})
})
}
//倒计时
function sendSmsRemind() {
var $smsBtn=$('#btnSms');
$smsBtn.prop('disabled',true); //禁用
var time =60;
var remind=setInterval(function (){
$smsBtn.val(time + '秒重新发送');
time=time-1;
if (time<1){
clearInterval(remind);
$smsBtn.val('点击获取验证码').prop('disabled',false);
}
},1000)
}
</script>
</body>
</html>
后端代码
def login1(request):
if request.method == 'GET':
form = loginForm()
return render(request, 'login1.html', {'form': form})
form = loginForm(data=request.POST)
if form.is_valid():
# 用户输入正确，登录成功
mobile = form.cleaned_data.get('mobile')
# 把用户名写入到session中
user_object = models.Username.objects.filter(mobile=mobile).first()
request.session['user_id'] = user_object.id
request.session['user_name'] = user_object.username
return JsonResponse({'status': True, 'data': '/menu/'})
return JsonResponse({'status': False, 'error': form.errors})
class loginForm(BootStrapForm):
mobile = forms.CharField(label="手机号",
validators=[RegexValidator(r'^(1[3|4|5|6|7|8|9])\d{9}$', '手机号格式错误'), ])
code = forms.CharField(label="短信验证码")
def clean_mobile(self):
mobile = self.cleaned_data['mobile']
exists = models.Username.objects.filter(mobile=mobile).exists()
if not exists:
raise ValidationError('手机号不存在')
return mobile
def clean_code(self):
code = self.cleaned_data.get('code')
mobile = self.cleaned_data.get('mobile')
if not mobile:
return code
conn = get_redis_connection()
redis_code = conn.get(mobile)
if not redis_code:
raise ValidationError('验证码已失效')
redis_str_code = redis_code.decode('utf-8')
if code.strip() != redis_str_code:
raise ValidationError('验证码错误,请重新输入')
return code
