AJAX與PHP(PHP筆記)--動態驗證用戶名

在PHP基礎的學習過程當中常常會遇到對頁面的局部刷新。javascript

好比說,咱們在填寫用戶名的同時,對數據庫中的信息進行驗證,檢查是否充分。php

這時就要用到AJAX實現頁面的動態加載。html

下面例子是簡單的PHP與AJAX交互的方法:
PHP+AJAX+MySQL
首先是html部分java

ajax.htmlmysql

<html>
<head>
    <!--加載jquery庫-->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!--加載js-->
    <script type="text/javascript" src="ajax_test.js"></script>
</head>
<body>
    <input class="input" type="text" name="name" onkeyup="nameCheck(this.value)">
</body>
</html>

而後是AJAX部分:
ajax_test.jsjquery

/* 動態檢查用戶名是否重複 當用戶名欄有鍵盤動做時調用 會經過PHP檢查MySQL數據庫中用戶名是否等於輸入 */
function nameCheck(str) {
    //判斷輸入是否不爲空
    if (str.length !== 0) {
        //不爲空則啓動AJAX進行局部刷新
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行的代碼
            xmlhttp = new XMLHttpRequest();
        } else {
            //IE6, IE5 瀏覽器執行的代碼
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //處理函數
        xmlhttp.onreadystatechange = function() {
            //readyState爲4時服務器響應完成
            //status=200時交易成功 
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //判斷PHP返回值
                if (xmlhttp.responseText == '1') {
                    //返回1說明用戶名重複,彈出窗口
                    alert("用戶名重複!");
                } 
            }
        };
        //規定請求的類型、URL 以及是否異步處理請求。
        xmlhttp.open("GET", "checkName.php?name=" + str, true);
        //發送
        xmlhttp.send();
    }
}

以後是處理數據庫的php部分ajax

checkName.phpsql

<?php /* 該腳本用於判斷數據庫中是否存在AJAX傳來的值 */ //從請求URL地址中獲取 name參數 $name=$_GET["name"]; //經過mysqli鏈接數據庫 //參數分別爲(服務器地址,用戶名,密碼,數據庫名) $con = new mysqli("localhost","root","","test"); //判斷數據庫鏈接是否成功 if ($con ->connect_error) { //die()函數--->終止腳本並輸出信息 die("數據庫鏈接失敗:".connect_error); } //SQL語句 $sql = "SELECT name FROM User WHERE Name = '".$name."'"; //調用mysqli的query()方法查詢 $result = $con->query($sql); //關閉鏈接 $con->close(); //判斷結果並輸出num_rows爲行數 if ($result->num_rows != 0) { //若是存在相同信息則輸出'1' echo('1'); }else{ //若是不存在相同信息則輸出'0' echo('0'); } ?>

我在數據庫中插入過admin這個用戶
因此,結果以下:
這裏寫圖片描述數據庫

相關文章
相關標籤/搜索