1. 程式人生 > >Ajax-使用者名稱驗證簡單例子(詳解)

Ajax-使用者名稱驗證簡單例子(詳解)

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>