四. get請求(驗證用戶名是否存在)

<!DOCTYPE html>
<!-- 前端代碼 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" placeholder="輸入一個暱稱" id="name"><br>
    <!-- <input type="submit" value="發送請求" id="submit"> -->
<h3></h3>
</body>
</html>

<script src='jquery-3.2.1.js'></script>

<script>
$(function () {
    $("#name").blur(function() {
        // 建立請求對象
        var xhr = new XMLHttpRequest();

        // 請求行
        // 獲取參數
        var name = $("#name").val();
        console.log(name);
        
        xhr.open('get', 'getData.php?name=' + name);

        // 請求頭
        // xhr.setRequestHeader('a', 'b');

        // 請求體
        xhr.send(null);

        // 註冊回調函數
        xhr.onload = function() {
            // xhr.responseText 爲服務器返回的數據
            $("h3").text(xhr.responseText);
        };
    });
});
</script>
<?php
    // 後端代碼
    // 獲取傳過來的數據
    $name = $_GET['name'];

    // 用戶名數據庫
    $nameArr = array("ray", "lee", "918");

    // 查找該用戶名是否存在數據庫
    $res =  in_array($name, $nameArr);

    // 根據查詢結果, 返回數據
    if ($res) {
        echo "已經被註冊, 請更換一個!";
    } else {
        echo "沒有被使用, 趕快註冊吧!";
    }
?>
相關文章
相關標籤/搜索