AJAX实现无刷新验证用户名
AJAX 实现 验证 刷新 用户名
2023-09-27 14:23:53 时间
register.php
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>用户注册</title> <script type="text/javascript"> //创建ajax引擎 function getXmlHttpObject(){ //不同的浏览器获取xmlhttprequest 的方法不一样 if(window.ActiveXObject){ //window.alert('ie'); xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); } else{ //window.alert('ff'); xmlHttpRequest=new XMLHttpRequest(); } return xmlHttpRequest; } var myXmlHttpRequest=""; function checkName(){ myXmlHttpRequest=getXmlHttpObject();//1号线 if(myXmlHttpRequest){ //window.alert("创建Ajax引擎成功!"); //通过myXmlHttpRequest对象发送请求到服务器的某一个页面 //第一个参数表示请求的方式,get/post //第二个参数指定url,对那个页面发出ajax请求(本质仍然是http请求),只要是web开发的底层是http请求,http的底层是tcp/ip协议 //第三个参数 true 表使用异步机制,false表示不使用异步机制。 //打开请求 //var url="/ajax/registerPro.php?username="+$("username").value; //var url="/ajax/registerPro.php?mytime="+new date()+"&username="+$("username").value; var url="/ajax/registerPro.php"; //这个是要发送数据 var data="username="+$("username").value; //window.alert(url); myXmlHttpRequest.open("post",url,true); //这句话不可少 //http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //指定回调函数 . chuli是函数名 myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求,如果是get请求发送null即可;如果是post请求,则填入实际的请求即可 //myXmlHttpRequest.send(null); //2号线 myXmlHttpRequest.send(data); //2号线 } } //回调函数 function chuli(){ //window.alert("回调函数成功!!"+xmlHttpRequest.readyState); //还是取值了 if(xmlHttpRequest.readyState==4){ //window.alert("服务器返回"+xmlHttpRequest.responseText); $("myres").value=xmlHttpRequest.responseText; } } //这里写一个函数 function $(id){ return document.getElementById(id); } </script> </head> <body> <form action="" method="post"> 用户名字:<input type="text" onkeyup="checkName()" name="username1" id="username" /> <input onclick="checkName();" type="button" value="验证用户名" /><input style="border-width:0px;color:red;" type="text" id="myres"/> <br /> 用户密码:<input type="password" name="password" /> <br /> 电子邮件:<input type="text" name="email" /> <br /> <input type="button" value="注册账号"> </form> </body> </html>
registerPro.php
$username = $_POST['username']; // echo "用户名是:" . $username; // 3号线 if ($username == "zhosoft") { echo "此用户名不可用!"; // 注意,这里的数据是返回给请求的页面。 } else { echo "恭喜您,此用户名可用!"; }
相关文章
- ajax与HTML5 history pushState/replaceState实例
- javascript - 封装ajax
- ajax同步和异步
- 【java项目实践】具体解释Ajax工作原理以及实现异步验证username是否存在+源代码下载(java版)
- 仅用aspx文件实现Ajax调用后台cs程序。(实例)
- Asp.net MVC利用Ajax.BeginForm实现bootstrap模态框弹出,并进行前段验证
- ajax实现JSONP跨域
- ajax
- jquery.form.js实现将form提交转为ajax方式提交的方法
- ajax跳转页面问题
- JavaScript-每隔5分钟执行一次ajax请求的实现方法
- 1-jQuery - AJAX load() 方法【基础篇】
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.6 技巧:不使用AJAX而链接至外部页面
- $.ajax 中的contentType 坑坑
- jquery的ajax实现方式
- AJAX应用的五个步骤
- ajax结合接口 分页插件
- 关于 ajax 动态返回数据 css 以及 js 失效问题
- Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]
- IFrame实现的无刷新(仿ajax效果)...
- JavaScript实现拖拽预览,AJAX小文件上传
- 玩转spring boot——ajax跨域
- 原生js实现的ajax请求
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理