php与Ajax（三）—无刷新验证用户名实例之分析

最新推荐文章于 2022-06-21 22:18:28 发布

致Great

最新推荐文章于 2022-06-21 22:18:28 发布

阅读量1.2k

点赞数 2

分类专栏： php与Ajax 文章标签： php ajax

本文链接：https://blog.csdn.net/yanqianglifei/article/details/51383619

版权

php与Ajax 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Ajax实现的无刷新验证用户名是否可用的功能。通过register.php页面输入用户名并触发检查，利用Ajax向process.php发送请求判断用户名是否已被占用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无刷验证新用户名

自己最近看视频自学ajax，想把一些实例分享给大家，第一个案列是无刷新验证用户名是否可用。

一、效果图

1、用户可用

2、用户不可用

3、项目文件（register.php-注册页面和process.php-判断用户名是否可用）

二、代码

<!doctypehtml>
<htmllang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <scripttype="text/javascript">
        //创建ajax引擎
        function getXmlHttpObject(){
            var xmlHttpRequest;
            //不同浏览器获取对象XMLHttpRequest
            if(window.ActiveXObject){
                xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
            }
            else{
                xmlHttpRequest=newXMLHttpRequest();
            }
            return xmlHttpRequest;
        }
        var myXmlHttpRequest="";
        //验证用户名是否存在
        function checkName(){
            myXmlHttpRequest=getXmlHttpObject();
            //判断xmlHttpRequest是否成功
            if(myXmlHttpRequest){
                //通过myXmlHttpRequest对象发送请求到服务器的某个页面
                //第一个参数标示请求的方式，‘get’、‘post’
                //第二个参数指定url，对那个页面发送ajax请求（本质仍然是http请求）
               /*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);
                 */
                varurl="/Ajax/process.php?username="+$("username").value;
                //window.alert(url);
                myXmlHttpRequest.open("get",url,true);
                //window.alert('创建ajax引擎成功');
 
                //指定回调函数,chuili是函数名
               myXmlHttpRequest.onreadystatechange=chuli;//调用
 
                //真的发送请求，如果是各塔请求则填入null即可
                //如果是post请求,则填入实际数据
                myXmlHttpRequest.send(null);
            }
            else
            {
//                window.alert('创建失败');
            }
        }
        function chuli(){
           // window.alert("cuhli函数被调用"+myXmlHttpRequest.readyState);
            //我要取出从register.php返回的数据
            if(myXmlHttpRequest.readyState==4){
                //取出值，根据返回信息的数据格式
                //window.alert("服务器返回"+myXmlHttpRequest.responseText);
               $('myres').value=myXmlHttpRequest.responseText;
            }
        }
        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
<formaction="???" method="post">
    用户名字:<inputtype="text" name="username1"οnkeyup="checkName()" id="username">
    <input type="button"value="验证用户名">
    <input style="border-width:0;color: #e93b3d" type="text" id="myres">
    <br/>
    用户密码:<inputtype="password" name="password"><br>
    电子邮件:<inputtype="text" name="email"><br/>
    <input type="submit"value="用户注册">
</form>
 
</body>
</html>

</pre><pre>

process.php—判断用户名是否可用

<?php
   //接受数据
   $username=$_GET['username'];
//   echo "用户名".$username;
   if($username=="李四"){
       echo "用户名不可用";
    }
   else{
       echo"恭喜用户名可用";
    }
?>

三、原理图