·您当前的位置:主页 > 技术教程 > jQuery教程 >

[jQuery]ajax在php程序无刷新判断用户名

时间:2017-05-02 00:05酷播
[jQuery]ajax在php程序无刷新判断用户名

[jQuery]ajax在php程序无刷新判断用户名  
register.php

  1. <html> 
  2. <head> 
  3. <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
  4. <title>用户注册</title> 
  5. <script type="text/javascript"> 
  6. //创建ajax引擎 
  7. function getXmlHttpObject(){ 
  8.     //不同的浏览器获取xmlhttprequest 的方法不一样 
  9.     if(window.ActiveXObject){ 
  10.         //window.alert('ie'); 
  11.         xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
  12.         } 
  13.     else{ 
  14.         //window.alert('ff'); 
  15.         xmlHttpRequest=new XMLHttpRequest(); 
  16.         } 
  17.     return xmlHttpRequest; 
  18. var myXmlHttpRequest=""
  19. function checkName(){ 
  20.     myXmlHttpRequest=getXmlHttpObject();//1号线 
  21.     if(myXmlHttpRequest){ 
  22.         //window.alert("创建Ajax引擎成功!"); 
  23.         //通过myXmlHttpRequest对象发送请求到服务器的某一个页面 
  24.         //第一个参数表示请求的方式,get/post 
  25.         //第二个参数指定url,对那个页面发出ajax请求(本质仍然是http请求),只要是web开发的底层是http请求,http的底层是tcp/ip协议 
  26.         //第三个参数 true 表使用异步机制,false表示不使用异步机制。 
  27.         //打开请求  
  28.         //var url="/ajax/registerPro.php?username="+$("username").value; 
  29.         //var url="/ajax/registerPro.php?mytime="+new date()+"&usernameusername="+$("username").value; 
  30.         var url="/ajax/registerPro.php"
  31.         //这个是要发送数据 
  32.         var data="username="+$("username").value; 
  33.         //window.alert(url); 
  34.         myXmlHttpRequest.open("post",url,true); 
  35.         //这句话不可少 
  36.         //http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  37.         myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
  38.         //指定回调函数 . chuli是函数名 
  39.         myXmlHttpRequest.onreadystatechange=chuli
  40.         //真的发送请求,如果是get请求发送null即可;如果是post请求,则填入实际的请求即可 
  41.         //myXmlHttpRequest.send(null); //2号线 
  42.         myXmlHttpRequest.send(data); //2号线 
  43.         } 
  44. //回调函数 
  45. function chuli(){ 
  46.  
  47.     //window.alert("回调函数成功!!"+xmlHttpRequest.readyState); 
  48.     //还是取值了 
  49.     if(xmlHttpRequest.readyState==4){ 
  50.             //window.alert("服务器返回"+xmlHttpRequest.responseText); 
  51.             $("myres").value=xmlHttpRequest.responseText; 
  52.         } 
  53. //这里写一个函数 
  54. function $(id){ 
  55.     return document.getElementById(id); 
  56.  } 
  57. </script> 
  58. </head> 
  59. <body> 
  60.     <form action="" method="post"> 
  61.             用户名字:<input type="text" onkeyup="checkName()" name="username1" id="username" />  
  62.             <input onclick="checkName();" type="button" value="验证用户名" /><input style="border-width:0px;color:red;" type="text" id="myres"/> <br />  
  63.             用户密码:<input type="password" name="password" /> <br />  
  64.             电子邮件:<input type="text" name="email" /> <br /> <input type="button" value="注册账号"> 
  65.     </form> 
  66. </body> 
  67. </html>  

registerPro.php

  1. $username = $_POST['username']; 
  2. // echo "用户名是:" . $username; // 3号线 
  3. if ($username == "zhosoft") { 
  4.     echo "此用户名不可用!";  // 注意,这里的数据是返回给请求的页面。 
  5. } else { 
  6.     echo "恭喜您,此用户名可用!"; 
  7.  
  8.   
  9. 作者:churk2012 

 

热门文章推荐

请稍候...