ajax之用户名唯一性验证的实现(php)

用户名唯一性验证的实现

在一些需要用户注册的系统中,由于系统需要保证用户名的唯一性,在注册时往往需要检查用户名。在一些使用传统方式设计的网站中,往往需要提交整个页面来进行用户名唯一性的检查。这种方式虽然可以正确检测用户名的唯一性,但是对于用户的友好度比较差。

使用Ajax进行用户名唯一性检查可以在不影响用户表单填写的情况下执行,大大增加了表单的友好度。以下代码是一个进行用户名唯一性验证的例子。

  1. <html>
  2. <head>
  3. <title>AjaxExample</title>
  4. <scripttype="text/javascript">
  5. varxmlobj;//定义XMLHttpRequest对象
  6. functionCreateXMLHttpRequest()
  7. {
  8. if(window.ActiveXObject) //如果当前浏览器支持ActiveXobject,则创建ActiveXObject对象
  9. {
  10. xmlobj=newActiveXObject("Microsoft.XMLHTTP");
  11. }
  12. elseif(window.XMLHttpRequest)//如果当前浏览器支持XMLHttpRequest,则创建XMLHttpRequest对象
  13. {
  14. xmlobj=newXMLHttpRequest();
  15. }
  16. }
  17. functionValidate()//主程序函数
  18. {
  19. CreateXMLHttpRequest();//创建对象
  20. varshowurl="validate.php?username="+document.getElementById("username").value;//构造URL
  21. xmlobj.open("GET",showurl,true);//调用validate.php
  22. xmlobj.onreadystatechange=StatHandler;//判断URL调用的状态值并处理
  23. xmlobj.send(null);//设置为不发送给服务器任何数据
  24. }
  25. functionStatHandler()//用于处理状态的函数
  26. {
  27. if(xmlobj.readyState==4&&xmlobj.status==200)//如果URL成功访问,则输出网页
  28. {
  29. if(xmlobj.responseText=="1")//检查用户名是否有效
  30. {
  31. document.getElementById("msg").innerHTML="<fontcolor=RED>该用户名已被人使用</font>";
  32. }
  33. elseif(xmlobj.responseText=="0")
  34. {
  35. document.getElementById("msg").innerHTML="<fontcolor=GREEN>该用户名未被人使用</font>";
  36. }
  37. else
  38. {
  39. document.getElementById("msg").innerHTML="<fontcolor=RED>用户名验证程序出错</font>";
  40. }
  41. }
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <p><formaction="">
  47. 用户名:<inputtype="text"id="username">
  48. <inputtype="button"value="用户名验证"onclick="Validate();">
  49. <divid="msg"></div>
  50. </form></p>
  51. </body>
  52. </html>

上面的代码通过请求validate.php来执行用户名的唯一性验证,并根据validate.php的返回内容来决定用户名是否唯一,代码如下所示。

  1. <?php
  2. $conn=mysql_connect("localhost","root","");
  3. $user=$_GET['username'];
  4. $querySQL="SELECT*FROMusersWHEREusername='$user'";
  5. mysql_select_db("cms",$conn);
  6. $rs=mysql_query($querySQL,$conn)ordie("Error");
  7. $rs_cnt=mysql_num_rows($rs);
  8. echo$rs_cnt;
  9. ?>

运行结果如图50-6所示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 在前端页面中,通过监听输入框的键盘抬起事件,获取输入的用户名。 2. 发送一个ajax请求到后端,传递用户名参数。 3. 后端接收到请求后,查询数据库中是否存在该用户名。 4. 如果存在该用户名,则返回错误信息给前端。如果不存在,则返回成功信息。 5. 前端页面根据返回的信息,显示相应的提示,例如红色字体提示“用户名已存在”或绿色字体提示“用户名可用”。 以下是大致的示例代码: 前端页面: ``` <input type="text" id="username" onkeyup="checkUsername()" /> <div id="username_tip"></div> <script> function checkUsername() { var username = document.getElementById("username").value; var xhr = new XMLHttpRequest(); xhr.open('POST', 'check_username.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.result === 'fail') { document.getElementById("username_tip").innerHTML = "<span style='color: red;'>用户名已存在</span>"; } else { document.getElementById("username_tip").innerHTML = "<span style='color: green;'>用户名可用</span>"; } } } }; xhr.send('username=' + encodeURIComponent(username)); } </script> ``` 后端代码(使用PHP语言): ``` <?php $db_host = 'localhost'; $db_name = 'test'; $db_user = 'root'; $db_pass = ''; $username = $_POST['username']; try { $dsn = "mysql:host=$db_host;dbname=$db_name;charset=utf8mb4"; $pdo = new PDO($dsn, $db_user, $db_pass); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE username = ?"); $stmt->execute([$username]); $count = $stmt->fetchColumn(); if ($count > 0) { echo json_encode(array("result" => "fail")); } else { echo json_encode(array("result" => "success")); } } catch(PDOException $e) { echo json_encode(array("result" => "error", "message" => $e->getMessage())); } ?> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值