PHP + JQUERY + AJAX 帳號欄位檢查

使用Ajax 前，建議你必須看得懂 Jquery語法，這樣才能方便修改

1. HTML 表單欄位 

設定欄位名稱及Javascript要抓取的ID為 account

<input name="username" class="form-control" id="account" type="text" value="" onkeyup="checkRegAcc()">
<span class="text-danger" id="msg_username"></span>

2. JQUERY Ajax 設定語法

網頁 先載入 jquery <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Ajax -->
  <script>
    $(document).ready(function(){
    checkRegAcc = function() {
    if ($('#account').val().length >= 2) {
        $.ajax({
            url: 'mag_admin_check.php',  // 判斷欄位是否存在的程式
            type: 'GET',    // 傳遞的方法
            data: {
                username: $('#account').val()
            },
            error: function(xhr) {          // 設定錯誤訊息
                alert('Ajax request 發生錯誤');
            },
            success: function(response) {   // 將回傳的訊息寫入網頁中
                $('#msg_username').html(response);
                $('#msg_username').fadeIn();
            }
        });
    } else {
        $('#msg_username').html('');
    }
};
});
</script>


3. PHP 判斷用的程式碼, 參考用，請依實際表單欄位更改

require 'config.inc.php';  // 連線資料庫

if (isset($_GET['username'])) {
    $rs = $pdo->prepare("SELECT * FROM `admin` WHERE `username`=:username");
    $rs->bindParam(':username', $_GET['username']);
    $rs->execute();
    $d = $rs->fetchObject();
 
    if ($d->username == '') {
        $ret = "此帳號可以使用";
    } else {
        $ret = "此帳號已經有人使用";
    }
    echo $ret;
}

參考資料 http://fecbob.pixnet.net/blog/post/43025230-php%28asp.net%29%2Bjquery%2Bajax%E5%B8%B3%E8%99%9F%E6%AA%A2%E6%9F%A5