JS:javascript
<script type="text/javascript" src="<%=basePath%>js/jquery.js"></script> <script type="text/javascript"> $(document).ready( function(){ $("#uname").blur( //添加文本框失去焦點事件 function(){ var uname=$("#uname").val(); //獲取文本框的值 $.ajax({ //獲取 ajax type:'get', //請求方式 url:'<%=basePath%>login.action', //發送給哪一個Action data:"uname="+uname, //發送uname給Action success:function(data){ //執行成功後的函數 data參數有Action返回自動賦值 if(data=="success") //若是返回值爲success { $("#nameMessage").html("驗證成功"); //在span標籤顯示驗證成功 }else{ $("#nameMessage").html("驗證失敗"); } } }); }) }); </script>
JSP:html
<body> <form action="<%=basePath%>login.action"> <p> <input type="text" name="uname" id="uname"> </p> <p> <input type="text" name="upwd" id="upwd"> </p> <span id="nameMessage"></span> </form> </body>
Action:java
public class LoginAction extends ActionSupport { private String uname; private String upwd; @Override public String execute() throws Exception { HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); if ("lwq".equals(uname)) { out.print("error"); } else { out.print("success"); //最後由ajax中data自動接收 } out.close(); return null; } public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getUpwd() { return upwd; } public void setUpwd(String upwd) { this.upwd = upwd; }