AJAX实现无刷新检测用户名功能

时间：2021-05-28

先来看看原理图

register.php

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{list-style: none;margin:0;padding:0;} tr{width:200px;}td{width:80px;padding:5px 0;}td input,textarea{border: 1px solid #79ABFE;} </style> </head> <body> <div class="content"> <script> myXmlHttpRequest.ContentType=("text/xml;charset=UTF-8"); //创建ajax引擎(1号线) function getXmlHttpObject(){ var xmlHttpRequest; //不同浏览器获取对象xmlHttpRequest方法不一样 if(window.ActiveXObject){ xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; } //验证用户名是否存在 var myXmlHttpRequest="";//因为chuli也用到了,所以要定义为全局变量 //创建方法(2号线 http请求) function checkName(){ //创建对象 myXmlHttpRequest=getXmlHttpObject(); //判断是否创建ok if(myXmlHttpRequest){ //通过myXmlHttpRequest对象发送请求到服务器的某个页面 var url="./registerPro1.php"; //要发送的数据 var data="username="+$('username').value; //打开请求 myXmlHttpRequest.open("post",url,true);//ture表示使用异步机制 //POST方法 myXmlHttpRequest.setRequestHeader("Content-Type","application/x-plete="off"/ onclick="showNotice(this)"></textarea></td> </tr> <tr> <td></td> <td><input class="btn" type="submit" name="submit" value="提交"/></td> </tr> </table> </form> </div> </body></html>

registerPro1.php

<?php //将数据(text格式,xml格式,json格式)返回到ajax引擎(3号线 http响应 ) //header("Content-Type: text/xml; charset=utf-8"); //告诉浏览器,返回的是xml格式 header("Content-Type: text/html; charset=utf-8"); //告诉浏览器,返回的是text/json格式 $username = $_POST["username"]; //①// if($username=="abc"){// echo '网名不可用';// }else{// echo '网名可用';// } //②// $info="";// if($username=="abc"){// $info.="<res><mes>网名不可用</mes></res>";// }else{// $info.="<res><mes>网名可用</mes></res>";// }// echo $info; //③// $info="";// if($username=="abc"){// //这里的$info返回的是一个字串// $info.='{"res":"不可用","id":"123","age":"5"}';// }else{// $info.='{"res":"可用","id":"3","age":"1"}';// }// echo $info; //③+ $info=""; if($username=="abc"){ //这里的$info返回的是一个字串 $info.='[{"res":"不可用","id":"123","age":"5"},{"res":"abc不可用","id":"3","age":"0"}]'; }else{ $info.='[{"res":"可用","id":"1","age":"15"},{"res":"可用","id":"83","age":"9"}]'; } echo $info;?>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章