zoukankan      html  css  js  c++  java
  • 【05】AJAX实例-检测用户名是否存在(实例)

    AJAX实例-检测用户名是否存在

     
    用户注册时,需要填写个人信息,其中包括用户名。当用户输入完成时,JavaScript 需要及时检测用户名是否存在,如果存在给出提示,请用户更换用户名。

    当然,这个步骤可以在用户提交表单以后由后台程序检测,如果用户名已存在,用户需要返回注册页面重新填写用户名,而前面填写的其他信息也随着网页的跳转已经过期,全部需要重填,这对用户来说是极大的伤害。

    因此,有必要使用 AJAX 在用户不提交信息的情况下及时检测用户名是否存在。

    前台代码:
    1. <p>
    2. 请输入用户名:<input type="text" id="demo"/>
    3. <span id="result"></span>
    4. </p>
    5. <script type="text/javascript">
    6. document.getElementById("demo").onblur=function(){// 输入框失去焦点
    7. var thisNode=this;
    8. var span=document.getElementById("result");
    9. var xmlhttp;
    10. try{
    11. // code for IE7+, Firefox, Chrome, Opera, Safari
    12. xmlhttp=newXMLHttpRequest();
    13. }catch(e){
    14. // code for IE6, IE5
    15. xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
    16. }
    17. xmlhttp.onreadystatechange=function(){
    18. if(xmlhttp.readyState<4){// 正在交互
    19. span.style.color="blue";
    20. span.innerHTML="正在检测...";
    21. }
    22. if(xmlhttp.readyState==4&& xmlhttp.status==200){// 请求成功
    23. if(parseInt(xmlhttp.responseText)){// 将服务器返回的数据转换为整数
    24. span.style.color="red";
    25. span.innerHTML="抱歉,您填写的用户名已经存在!";
    26. }else{
    27. span.style.color="green";
    28. span.innerHTML="恭喜你,填写正确!";
    29. }
    30. }
    31. }
    32. xmlhttp.open("POST","http://localhost/moyu.php?action=checkUserName",true);
    33. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    34. xmlhttp.send("username="+thisNode.value);
    35. }
    36. </script>
     

    后台代码(PHP):
    1. <?php
    2. if($_GET['action']=="checkUserName"){
    3. // 为简单起见,这里不再查询数据库,使用 3 个用户名作为示例
    4. if(
    5. $_POST['username']=="admin"||
    6. $_POST['username']=="xiaoming"||
    7. $_POST['username']=="zhangsan"
    8. ){
    9. echo 1;
    10. }else{
    11. echo 0;
    12. }
    13. }
    14. ?>
     

    实例演示(输入完成,请将焦点离开输入框):

    请输入用户名:  


    说明:"admin"、"xiaoming"和"zhangsan"三个用户名已存在。
     
     
    魔芋测试:
     
     
     
    3.gif



     

  • 相关阅读:
    elastic
    Leetcode题库 第十行
    Leetcode题库-实现strStr()
    Redis持久化
    Redis的数据结构及应用场景
    Redis缓存的淘汰策略
    Redis缓存常见问题
    Redis面试题1
    消息队列的原理及选型
    【转载】java高并发/mysql/mybatis/spring博客
  • 原文地址:https://www.cnblogs.com/moyuling/p/5272496.html
Copyright © 2011-2022 走看看