ajax驗證用戶是否存在邏輯 · 學習AJAX

[TOC] >[success] # ajax驗證用戶是否存在邏輯 <br/> >[success] ## 前端代碼 <br/> ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function () { document.querySelector('input').onblur = function () { // 0. 修改頁面的提示信息 document.querySelector('h3').innerText = '驗證中'; // 1. 創建對象 var xhr = new XMLHttpRequest(); // 2. 設置請求行(get請求數據寫在url后面) xhr.open('get', 'checkName.php?name=' + this.value); // 3. 設置請求頭(get請求可以省略,post不發送數據也可以省略) // 3.5 注冊回調函數 xhr.onload = function () { console.log(xhr.responseText); document.querySelector('h3').innerText = '驗證完成'; document.querySelector('h2').innerText = xhr.responseText; } // 4. 請求主體發送(get請求為空，或者寫null，post請求數據寫在這里，如果沒有數據，直接為空或者寫null) xhr.send(null); } } </script> </head> <body> <h2>用戶注冊</h2> <h3>狀態</h3>   <input type="text" placeholder="請輸入用戶名"> </body> </html> ~~~ <br/> >[success] ## 后端代碼 <br/> ~~~ <?php // 接收提交的數據 $name = $_GET['name']; // 假數據模擬 => 數組 $nameArr = array('jack','rose','icemountain','Robot'); // 判斷是否在數組中存在 // 參數1：查詢的內容 // 參數2：去哪個數組查詢 // in_array()返回布爾值 $result = in_array($name,$nameArr); // 返回不同的內容給用戶即可 if($result == true){ // 恭喜你可以用 echo '很遺憾，已被注冊，再選一個吧，o(╯□╰)o'; } else { echo '還沒人用呢！！！快來注冊哦O(∩_∩)O哈哈~'; // 很遺憾用不了 } sleep(2); ?> ~~~