Ajax在注册页面经常使用,当注册用户是用户名必须唯一时,要使用ajax获取表单中你输入的内容, 然后将这个数据利用XMLHttpRequest对象请求一个php文件,这个php文件接收到信息,查询数据库, 判断是否有相同的用户名已经注册,把结果echo出来,前端页面不用发生跳转,用xhr对象的ResponseText 的属性获取php页面返回的值,进行相应的处理,将提示是否能够注册的语句显示在页面当中,实现Ajax功能
需要注意的是,send();方法是向php页面发送数据,参数就是数据,数据类型为"key1=value1$key2=value2..." 的形式,经常以GET,POST两种方式传输,在使用POST方式时,必须使用方法setRequestHeader('key','value'); 设置头信息Content-Type: application/x-www-form-urlencoded,否则无法接收到信息
前端页面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax的具体实现</title> <script type="text/javascript"> //发送数据 function sen(){ var xhr=new XMLHttpRequest(); xhr.open('POST','./01.php',true);//异步传输 //获取表单中的内容 var oUser=document.getElementsByName('username')[0]; xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("username="+oUser.value); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ document.getElementById('username').innerHTML=xhr.responseText; } } } window.onload=function(){ } </script> </head> <body> <form id="form" action=""> <p>用户名:<input type="text" name="username" /><span id="username"></span></p> <p>密码:<input type="password" name="[pwd]"/><span id="pwd"></span></p> <p><input type="button" onclick="sen();" value="注册"/></p> </form> </body> </html>
php接收页面
<?php //print_r($_POST); if(isset($_POST['username'])){ if($_POST['username']=='admin'){ echo "不能注册"; }else{ echo '可以注册'; } } ?>
当点击注册按钮时,才触发Ajax函数,然后发生以下效果