zoukankan      html  css  js  c++  java
  • thinkphp中ajax用户名校验

    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;
        }

    数据库里面,数据如下:

    操作界面如下:

    在昵称中输入数据库中没有的数据,失去焦点:

    在昵称中输入数据库中存在的数据,失去焦点:

  • 相关阅读:
    ES6 语法
    使用过滤器进行跨域
    java读取资源文件(Properties)
    跨域
    java提取(获取)博客信息(内容)
    SSM命名规范框架
    学校管理系统设计java(数据库、源码、演讲内容、ppt等)
    学校管理系统C#(数据库、源码、演讲内容、ppt等)
    vue快速使用
    故障排除:无法启动、访问或连接到 Azure 虚拟机上运行的应用程序
  • 原文地址:https://www.cnblogs.com/invban/p/4832081.html
Copyright © 2011-2022 走看看