通过ajax验证后,表单再提交。
注意:
(1)html中的form不能使用submit,而要使用button,
(2)同时button 的id和name不能是‘submit’,否则也会失败。
(3)form需要一个id(例如id=”formid”),方便在ajax中找到对应的表单。
表单中的代码
<form action="{% url 'App:login' %}" method="post" id="formid">
{% csrf_token %}
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-4">
<span><h2>登录</h2></span>
<div class="form-group required">
<label class="control-label" for="name">用户名</label>
<input class="form-control" id="name" maxlength="10" name="name"
placeholder="请输入用户名" required type="text" value="">
</div>
<div class="form-group required">
<label class="control-label" for="password">密码</label>
<input class="form-control" id="password" maxlength="16" name="password"
placeholder="请输入密码" required type="password" value="">
</div>
<input class="btn btn-default" id="button" name="button" type="button" value="登录"
onclick= "checkfunction()">
</div>
</div>
</form>
form中点击提交button后,会触发函数 checkfunction(),通过ajax把数据提交到check_login视图函数中进行检验,并返回json数据。如果返回的是200,就执行document.getElementById(‘formid’).submit() 实现提交表单。表单提交的到login视图函数保存数据到数据库。
ajax中的代码
function checkfunction() {
$.post({% url 'App:check_login' %}, {
"username": usernamenode.val(),
'userpassword': userpasswordnode.val()
}, function (data, status) {
console.log(data.code, status);
if (data.code == 200) {
alert('登陆成功');
document.getElementById('formid').submit()
{# window.location.href='/' #}
}
else if (data.code == 404) {
alert("用户不存在")
}
else{
alert("请输入正确的密码")
}
})
}