ajax验证用户是否存在逻辑 · 学习AJAX

[TOC] >[success] # ajax验证用户是否存在逻辑 <br/> >[success] ## 前端代码 <br/> ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function () { document.querySelector('input').onblur = function () { // 0. 修改页面的提示信息 document.querySelector('h3').innerText = '验证中'; // 1. 创建对象 var xhr = new XMLHttpRequest(); // 2. 设置请求行(get请求数据写在url后面) xhr.open('get', 'checkName.php?name=' + this.value); // 3. 设置请求头(get请求可以省略,post不发送数据也可以省略) // 3.5 注册回调函数 xhr.onload = function () { console.log(xhr.responseText); document.querySelector('h3').innerText = '验证完成'; document.querySelector('h2').innerText = xhr.responseText; } // 4. 请求主体发送(get请求为空，或者写null，post请求数据写在这里，如果没有数据，直接为空或者写null) xhr.send(null); } } </script> </head> <body> <h2>用户注册</h2> <h3>状态</h3>   <input type="text" placeholder="请输入用户名"> </body> </html> ~~~ <br/> >[success] ## 后端代码 <br/> ~~~ <?php // 接收提交的数据 $name = $_GET['name']; // 假数据模拟 => 数组 $nameArr = array('jack','rose','icemountain','Robot'); // 判断是否在数组中存在 // 参数1：查询的内容 // 参数2：去哪个数组查询 // in_array()返回布尔值 $result = in_array($name,$nameArr); // 返回不同的内容给用户即可 if($result == true){ // 恭喜你可以用 echo '很遗憾，已被注册，再选一个吧，o(╯□╰)o'; } else { echo '还没人用呢！！！快来注册哦O(∩_∩)O哈哈~'; // 很遗憾用不了 } sleep(2); ?> ~~~