html+JS+php實現簡單的註冊使用者名稱驗證

單程旅行發表於2018-09-29
HTMLJSPHP

初學使用,不廢話
1、index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>註冊使用者</title>
    <script type="text/javascript" src="post_ajax.js"></script>
</head>
<body>
    <h1>註冊使用者</h1>
    <input type="text" name="userName" id="bt_user" onblur="postajax()"/><label id="lb_text" style="display:none"></label>

</body>
</html>

2、post_ajax.js

function postajax(){
      //XMLHttpRequest建立非同步物件
      var ajax = new XMLHttpRequest();
      //設定請求的php的url和引數
      ajax.open(`post`,`post_ajax.php`);
      //需要POST 資料，使用 setRequestHeader() 來新增 HTTP 頭
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // send傳送請求
      ajax.send(`Name=`+document.querySelector(`#bt_user`).value);
      //事件註冊
      ajax.onreadystatechange = function(){
        if (ajax.readyState ==4&&ajax.status==200) {
            //返回接收的內容並修改資料
            console.log(ajax.responseText);
            var show = document.querySelector(`#lb_text`);
                show.style.display=`block`;
            if (ajax.responseText =="OK") {
                show.innerHTML=`提示：該使用者已經註冊了！`
            } else{
                show.innerHTML=`提示：你可以使用該名字！`
            }
        }
      };
    }

3、post_ajax.php

<?php
    header(`content-type:text/html;charset=utf-8`);
    $name=$_POST[`Name`];
    //對比是資料可以通過資料庫獲取，並驗證
    $nameArray = array(`熊大`,"熊二",`張三`,`李四`,`王五`);
    $result=in_array($name, $nameArray);
    // 返回判定值給呼叫者
    if($result){
        echo "OK";
    } else{
        echo "not OK";
    }
?>


相關文章