關於ajax前臺驗證使用者名稱是否存在
阿新 • • 發佈:2019-01-02
<pre name="code" class="html"> <div class="login_li"> <div class="login_lt">使用者名稱</div><span id="userinfo" style="color:red;padding:5px 30px; "></span> <div class="login_rt"> <input type="text" class="all_in" id="username" name="username" onblur="loadXMLDoc();"/>
其中需要 onblur 失去焦點事,接下來就是AJAX:
ajax驗證是需要後臺寫程式碼,寫一個驗證action的,我用的是springMVC$.ajax({ type: "post", url:"<%=request.getContextPath()%>/user/check.do", data: {username: $("input[name='username']").val()}, success: function(msg){ // alert(msg); if("success"==msg){ $("#userinfo").html("**使用者已存在"); // alert("*********"); }else{ $("#userinfo").html(""); } }, error: function(){ // $("#userinfo").html(""); alert("呼叫異常"); } }); }
@RequestMapping("/check.do") @ResponseBody public void check(@RequestParam("username")String username,HttpServletResponse response,HttpServletRequest request,Model model){ try { PrintWriter out = response.getWriter(); User user = new User(); user.setUsername(username); boolean b=userService.checkUser(user); if(b){ // out.print("使用者已存在"); out.print("success"); return ; } return; } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } }
//可額外補充
document.getElementById("sub").disabled=true; //這段程式碼可以讓已經存在的使用者不能點選
//按鈕顏色變灰色
$("#sub").css("background-color","#C0C0C0");