ajax晋级篇---无刷新的数据交互用户名验证----text反馈

举报
孙中明 发表于 2022/01/23 01:08:57 2022/01/23
【摘要】 body><div class="login"> <h2>个人中心</h2> <div class="login-top"> <h1>注册</h1> <form action="{:U('Person/do_register')}" method="...

  
  1. body>
  2. <div class="login">
  3. <h2>个人中心</h2>
  4. <div class="login-top">
  5. <h1>注册</h1>
  6. <form action="{:U('Person/do_register')}" method="post">
  7. <input type="text" value="" οnkeyup="checkName();" id="username" name="username" placeholder="用户名字">
  8. <input style="border-width: 0;color: red;background-color:#e1e1e1;margin-left: 5%;" type="email" id="myres" >
  9. <input type="text" value="" name="email" placeholder="邮箱">
  10. <input type="password" value="" name="password" placeholder="密码">
  11. <div class="forgot">
  12. <input type="submit" value="注册" >
  13. </div>
  14. </form>
  15. </div>
  16. <div class="login-bottom">
  17. <h3>已有帐号 <a href="{:U('Person/login')}">登录</a> </h3>
  18. </div>
  19. </div>
  20. </body>



  
  1. <script type="text/javascript">
  2. //第一步---------------------创建ajax引擎
  3. function getXmlHttpObject(){
  4. var xmlHttpRequest;
  5. //不同的浏览器获取对象xmlhttprequest 对象方法不一样
  6. if(window.ActiveXObject){
  7. xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//这个是ie内核
  8. }else{
  9. xmlHttpRequest=new XMLHttpRequest();//非ie内核
  10. }
  11. return xmlHttpRequest;//将创建创建的ajax引擎实例化
  12. }
  13. var myXmlHttpRequest="";//设置全局变量 为了后面的chuli 函数需要取得属性
  14. //验证用户名是否存在
  15. function checkName(){
  16. myXmlHttpRequest=getXmlHttpObject();//从实例化的模型里面的方法函数
  17. //怎么判断创建ok
  18. if(myXmlHttpRequest){
  19. var url="{:U('Person/do_register1')}";//url 属性 选择提交的地址
  20. var data="username="+$('username').value;//数据 取得数据
  21. myXmlHttpRequest.open("post",url,true);//这里选择提交的方式post
  22. myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打开请求.
  23. //指定为了第四步处理做准备回调函数.chuli是函数名
  24. myXmlHttpRequest.onreadystatechange=chuli;
  25. //第二部--------------------------发送数据到服务器端
  26. myXmlHttpRequest.send(data);
  27. }
  28. }
  29. //回调函数
  30. function chuli(){
  31. //+myXmlHttpRequest.readyState
  32. //第四步------------------------------取出页面返回的数据
  33. if(myXmlHttpRequest.readyState==4){
  34. //取出值,根据返回信息的格式定.text
  35. $('myres').value=myXmlHttpRequest.responseText;
  36. }
  37. }
  38. //这里我们写一个函数 用来接收函数的id
  39. function $(id){
  40. return document.getElementById(id);
  41. }
  42. </script>



  
  1. public function do_register1(){
  2. //第三步-------------------------------------数据库这里处理
  3. $map['username']=I('post.username');
  4. $res=$this->person_model->where($map)->count();
  5. //返还数据到ajax引擎里面
  6. if($res>0){
  7. echo "用户名已注册,No";
  8. }else{
  9. echo "此用户名未注册,Ok";
  10. }
  11. }







  

文章来源: hiszm.blog.csdn.net,作者:孙中明,版权归原作者所有,如需转载,请联系作者。

原文链接:hiszm.blog.csdn.net/article/details/72757029

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200