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; }
数据库里面,数据如下:
操作界面如下:
在昵称中输入数据库中没有的数据,失去焦点:
在昵称中输入数据库中存在的数据,失去焦点:
时间: 2024-09-30 04:41:48