前端代码
<form id="loginForm" onsubmit="return false" action="##" method="post"> <input type="text" name="userName" class="username" placeholder="Username"> <input type="password" name="password" class="password" placeholder="Password"> <button type="button" onclick="loginNow()">Sign me in</button> <div class="error"><span>+</span></div> <p id="passwordTip" style="visibility: hidden">密码错误</p> </form>
ajax代码部分
function loginNow() { $.ajax({ type:"POST", url:"/login", data:$("#loginForm").serialize(), dataType:"json", success:function (result) { if(result==true){ // alert("成功") window.location.href="/notifications" }else{ document.getElementById("passwordTip").style.visibility="visible" // alert("密码错误") } } }) }
后端是经过用户名密码匹配,返回json格式的布尔值,前端进行验证,从而进行前后端分离