thinkphp中ajax使用者名稱校驗

木子小僧發表於2015-09-23
PHP

ajax實在是太神奇了，剛剛接觸，不足之處，請大家指正。

採用Ajax方式進行頁面無重新整理提示，來檢測使用者名稱是否存在。

搭建一個thinkphp的環境，在index.html中，ajax程式碼如下：

<script type="text/javascript">
    function checknickname(){
        //①    抓取被校驗的使用者名稱資訊
        var nickname = document.getElementById("usernickname").value;
        nickname = encodeURIComponent(nickname);//特殊字元處理
        
        var ajaxObj = new XMLHttpRequest();
        ajaxObj.onreadystatechange = function(){
            if(ajaxObj.readyState==4){
                document.getElementById('check').innerHTML = ajaxObj.responseText;
            }
        }
        
        //②ajax抓取到使用者名稱的暱稱傳遞給伺服器
        
        ajaxObj.open('GET','/thinkajax/index.php/Home/Index/checknicname?nickname=' + nickname);
        ajaxObj.send(null);
    }
</script>

html中：

<table align="center" border="0">
            <tr>
                <td>姓名：</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td>暱稱：</td>
                <td>
                    <input type="text" name="usernickname" id="usernickname" onblur="checknickname()"/>
                    <span id="check" style="color:red"></span>
                </td>
                
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit" value="提交"/></td>
            </tr>
        </table>

在後臺處理：

/*
     *使用者暱稱校驗
    */
    public function checknicname($nickname){
        echo $nickname;
        $info = D('user')->where("usernickname='$nickname'")->find();
        if($info){
            echo "使用者名稱已經存在，請換一個吧";
        }else{
            echo "使用者名稱正常使用！！";
        }
        exit;
    }

資料庫裡面，資料如下：

操作介面如下：

在暱稱中輸入資料庫中沒有的資料，失去焦點：

在暱稱中輸入資料庫中存在的資料，失去焦點：

 

相關文章