<!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('');
}
}
}
)
})
}