登入驗證判斷，獲取後臺資料

chenyanlong_v發表於2019-06-30

簡單使用者登入驗證(servlet,就不寫了)

html和js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>

       使用者名稱 <input type="text" name="username" id="username"/><br/>
       <input type="submit">
        <input type="button" value="使用ajax-get傳送請求" id="btn"/>
    </form>
</body>
<script>

    //需求:
    /*前臺編寫一個ajax請求,給後臺傳送一個name=tom,後臺獲取到name=tom,完成列印,
        列印完之後再給前臺寫一個okok,前臺在列印okok*/
         //1.編寫前臺傳送ajax請求
		/* 1）建立Ajax引擎物件 XMLHttpRequest
           2）為Ajax引擎物件繫結監聽（監聽伺服器已將資料響應給引擎）
           3）繫結提交地址(open,指定後臺的地址,引數,確定是否為非同步請求)
           4）傳送請求 (send())
           5）接受響應資料
		 */

		document.getElementById("btn").onclick = function(){
		    //1.獲取使用者輸入的使用者名稱
            var username = document.getElementById("username").value;
            //2.建立XMLHttpRequest物件
            var xhr = new XMLHttpRequest();
            //3.給核心物件派發一個監聽事件 (監聽核心物件的執行流程 , 監聽響應狀態碼200 )
            xhr.onreadystatechange = function(){
                //3.1判斷XMLHttpRequest物件的流程狀態 判斷狀態碼是否為200

                if(xhr.readyState == 4 && xhr.status==200){
                    //3.2如果狀態流程執行完畢結果4,  響應碼如果是200, 列印伺服器返回的資料
                    var value = xhr.responseText;  //伺服器返回的資料
                    alert(value);
                }

            }
            //4.呼叫open方法 ,1請求型別, 2指定請求的路徑,引數,3是否已非同步 (true非同步請求 false同步)
            xhr.open("get","/day17/Demo1_Servlet?username="+username,true);
            //5.傳送請求,send();
            xhr.send();
        }


</script>
</html>

 

相關文章