利用AJAX+PHP+MySQL实现不重新加载页面进行用户名已注册检测

vlambda
2020-05-30

利用AJAX+PHP+MySQL实现不重新加载页面进行用户名已注册检测

AJAX简介

AJAX全称——Asynchronous JavaScript and XML（异步JavaScript和XML）。使用AJAX，页面中用户的操作将通过AJAX引擎与服务器端进行通信，然后将返回结果提交给客户端页面的AJAX引擎，再由AJAX引擎来决定将这些数据插入到页面的指定位置。 AJAX只会返回修改部分的数据，并不会更新整个网页，但如果直接将数据提交到PHP服务器则会重新加载整个网页。

给出的代码都是可以直接复制测试的，修改下自己数据库的相关信息就可以了

服务器端处理代码（check.php）

<?php header('Content-type: text/html;charset=utf-8');//指定发送数据编码格式为utf-8 $link = mysqli_connect("localhost","root","","test1","3306");//连接数据库 mysqli_query($link,"set names utf8");//设置数据库编码 $username = $_GET['username'];//获取请求中附带的用户名 $sql = "select * from tb_user where username='".$username."'"; $res = mysqli_query($link,$sql);//执行sql语句 $info = mysqli_fetch_array($res);//以数组形式返回数据集 if($info){ echo "用户名[".$username."]已被注册！"; }else{ echo "可以使用用户名[".$username."]"; }?>

客户端处理代码（index.php）

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用AJAX实现不重新加载页面进行用户名已注册检测</title> <style type="text/css"> .back { width: 400px; height: 300px; margin: 100px auto; } .login { width: 400px; height: 250px; background: #bbb; } .back article { text-align: center; margin: 0 auto; font-size: 21px; font-weight: bold; } .login form p { text-align: center; } .tmp { color: #cccccc; } .user, .pwd { width: 200px; height: 30px; border: solid #ccc 1px; border-radius: 3px; padding-left: 32px; margin-top: 50px; margin-bottom: 10px; } .pwd { margin-top: 0; } .submit, .rest { width: 116px; height: 30px; background: rgba(0, 0, 0, .1); border: solid #ccc 1px; border-radius: 3px; } .submit:hover { cursor: pointer; background: #D8D8D8; } .rest:hover { cursor: pointer; background: #D8D8D8; }</style> <script type="text/javascript">        var http_request = false; //初始化请求变量        /*由于IE游览器和谷歌火狐等浏览器创建XMLHttpRequest对象的方式不同 所以这里将两种创建XMLHttpRequest对象的代码都写上了 */ function createRequest(url) {//初始化对象并发出XMLHttpRequest请求 http_request = false; if (window.XMLHttpRequest) { //判断是否火狐、谷歌等其他浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //判断是否IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert("浏览器不能创建XMLHTTP实例!"); return false; } http_request.onreadystatechange = alertContents; //当readyState发生改变时调用alertContents() //也就是请求被发送到服务器时，调用alertContents函数来处理
 http_request.open("GET", url, true); //以GET方式发出HTTP请求，true（异步）、false（同步） http_request.send(null);//传递参数（仅POST方式有效） }
 function alertContents() { //处理服务器返回的信息 if (http_request.readyState == 4) { //表示响应已完成 if (http_request.status == 200) {//表示交易成功 window.alert(http_request.responseText);//输出字符串形式的响应数据 } else {                    alert('您请求的页面发生错误'); return false; } } }</script> <script type="text/javascript"> function check() { var username = myform.user.value; //获取用户名文本框的值 if (username == "") { window.alert("请填写用户名!"); myform.user.focus(); //文本框获得焦点 return false; } else { createRequest('check.php?username=' + username + '&nocache=' + new Date().getTime()); } }</script></head>
<body> <section class="back"> <article>注册</article> <section class="login"> <form name="myform"> <p> <input type="text" name="user" class="user" placeholder="用户名" onchange="check()"> </p> <p><input type="password" name="password" class="pwd" placeholder="密码"></p> <p> <input type="submit" class="submit" value="注册"> <input type="reset" class="rest" value="重置"> </p> </form> </section> </section></body></html>