DOM input標籤輸入進行伺服器端資料的檢索
阿新 • • 發佈：2022-02-07
檢視程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>網路簡單請求</title> <script> function showHint(str){ var xmlhttp; if (str.length == 0){ document.getElementById("textHint").innerHTML = ''; return; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState==4 && xmlhttp.status == 200){ document.getElementById("textHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET",url,非同步/同步); xmlhttp.send() } </script> </head> <body> <div> <form>請輸入資訊： <input type="text"id = "text1" onkeyup="showHint()"> </form> <p>提示資訊: <span id="txtHint"></span></p> </div> </body> </html>
intput標籤，onkeyup = "func(this.value)",當輸入的內容作為引數傳遞給func（）函式
步驟：
獲取輸入框中資訊
建立XMLHttpRequest()物件，
修改物件內部的onreadystatechange（）方法，當readyState屬性狀態值改變時會執行該方法。
建立請求open（請求型別，"/try/ajax/gethint.php?q="+str，非同步/同步）//將傳進來的引數傳送給伺服器，向伺服器請求獲取與輸入內容相同的資料