<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugin/bootstrap/css/bootstrap.css">
</head>
<body>
<div style="text-align: justify-all">
<p>
<h1>欢迎登录</h1>
</p>
<form id="fm" class="form-horizontal" action="/login2.html" method="post" enctype="multipart/form-data" novalidate>
{% csrf_token %}
<div class="form-group">
<label for="id_username" class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="username" id="id_username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="id_password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-4">
<input type="password" class="form-control" name="password" id="id_password" placeholder="请输入密码">
</div>
<span style="color: red;">{{ form.password1.errors.0 }}</span>
</div>
<div class="form-group">
<label for="id_rmb" class="col-sm-2 control-label"></label>
<div class="col-sm-4">
<input type="checkbox" id="id_rmb" name="rmb" value="1">
<label for="id_rmb">一个月免登录</label>
</div>
</div>
<div class="form-group">
<label for="id_check_code" class="col-sm-2 control-label">验证码:</label>
<div class="col-sm-1">
<input type="text" class="form-control" name="check_code" id="id_check_code">
</div>
<div class="col-sm-5">
<img id="check_code_img" src="/check_code.html">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="sub_data" class="btn btn-default">提交</button>
<span id="error_msg" style="color: red;">{{ result.message }}</span>
</div>
</div>
</form>
<script src="/static/plugin/js/jquery-3.1.1.js"></script>
<script>
$(function () {
BindSubData();
});
function BindSubData() {
$("#sub_data").click(function () {
$.ajax({
url:"/login2.html",
type:"POST",
dataType:"JSON",
data:$("#fm").serialize(), #序列化所有的form表单数据
success:function (arg) {
if(arg.status){
window.location.href='/base.html';
}
else{
$("#error_msg").text(arg.message);
var $img=$("#check_code_img")[0];
$img.src=$img.src + '?';
$("#id_password,#id_check_code_img").val('');
}
}
})
});
}
</script>
</div>
</body>
</html>
<script>
$(function () {
BindSubData();
});
function BindSubData() {
#写在这里读不到value
$('#sub_data').click(function () {
var form_data=new FormData($("#fm")[0]); #必须写在click 的函数里面
$.ajax(
{
url:'/login2.html',
type:"POST",
data:form_data,
dataType:"JSON",
cache:false,
processData:false,
contentType:false,
success:function (arg) {
if(arg.status){
window.location.href="/base.html";
}
else{
$("#error_msg").text(arg.message);
var $img=$("#check_code_img")[0];
$img.src=$img.src + "?";
$("#id_password,#id_check_code").val('');
}
}
}
)
})
}
