Ajax-使用者名稱驗證簡單例子(詳解)
阿新 • • 發佈:2018-12-30
1.匯入JQuery庫
2.獲取name=”username”的節點:username
3.為username新增change響應函式
3.1 獲取username的value屬性值,去除前後空格且不為空,準備傳送Ajax請求
3.2 傳送Ajax請求檢驗username是否可用
3.3 在服務端直接返回一個html的片段
3.4 在客戶端瀏覽器把其中新增到#message的html中
<script type="text/javascript" src="jScript/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
//為username節點新增change響應函式
$(":input[name='username']").change(function(){
//獲取username的value屬性值
var val = $(this).val();
//去除前後空格
val = $.trim(val);
if(val != ""){
//Ajax請求的目標URL
var url = "valiateUsername";
//傳遞的引數
var args = {"username": val, "time": new Date()};
//在服務端直接返回一個html的片段
$.post(url, args, function(data){
//在客戶端瀏覽器把其中新增到#message的html中
$("#message").html(data);
});
}
});
});
</script>
<body>
<form action="" method="post" >
username: <input type="text" name="username">
<div id="message"></div>
<br>
<input type="submit" value="submit" >
</form>
</body>
Servlet
public class valiateUsername extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/* Arrays.asList:
* 將一個數組轉化為一個List物件這個方法會返回一個ArrayList型別的物件,
* 這個ArrayList類並非java.util.ArrayList類,而是Arrays類的靜態內部類!
* 用這個物件對列表進行新增刪除更新操作,就會報UnsupportedOperationException異常。
*/
List<String> usernames = Arrays.asList("AAA", "BBB", "CCC");
String username = request.getParameter("username");
String result = null;
//String.contains: 判斷是否存在包含關係,包含的話就返回true,不包含的話就返回false
if(usernames.contains(username)){
result = "<font color='red'>該使用者已經被使用</font>";
}else{
result = "<font color='green'>該使用者可以使用</font>";
}
response.setContentType("text/html; charset=UTF-8");
response.getWriter().print(result);
}
}
WEB
<servlet>
<servlet-name>valiateUsername</servlet-name>
<servlet-class>org.zl.servlet.valiateUsername</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>valiateUsername</servlet-name>
<url-pattern>/valiateUsername</url-pattern>
</servlet-mapping>