让代码更简单

jquery+ajax实现注册时判断用户资料是否存在

重要:本文最后更新于2018-11-27 18:34:49,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

前面说到jQuery能实现弹窗,通过弹窗我们可以和用户很方便的对话。ajax能在不刷新网页的前提下与服务器进行通信,并显示数据。很多网站都有在用户注册时弹出注册窗口,注册时实时判断用户输入的资料是否存在,今天我们就来实现这样的功能。

效果图如下:

代码狗ajax开发教程

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+ajax弹出登陆窗口</title>
<link rel="stylesheet" href="css/lanrenzhijia.css" media="all">
<script type='text/javascript' src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js?ver=1.4'></script>
<script type="text/javascript">
function showHint(str)//实时判断用户名函数
{
var xmlhttp;
if (str.length==0)
 {
 document.getElementById("txtHint1").innerHTML="";
 return;
 }
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint1").innerHTML=xmlhttp.responseText;
 }
 }
xmlhttp.open("GET","ajaxtest11.php?q="+str,true);
xmlhttp.send();
}
function showHint2(str)//实时判断用户邮箱函数
{
 var xmlhttp;
if (str.length==0)
{
 document.getElementById("txtHint2").innerHTML="";
 return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 document.getElementById("txtHint2").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","ajaxtest11.php?e="+str,true);
 xmlhttp.send();
}
</script>
<script>
jQuery(document).ready(function($) {
 $('.theme-login').click(function(){
 $('.theme-popover-mask').fadeIn(100);
 $('.theme-popover').slideDown(200);
 })
 $('.theme-poptit .close').click(function(){
 $('.theme-popover-mask').fadeOut(100);
 $('.theme-popover').slideUp(200);
 })
})
</script>
</head>

<body>
<div class="theme-buy">
<a class="btn btn-primary btn-large theme-login" href="javascript:;">jquery+ajax弹出登陆窗口</a>

</div>
<div class="theme-popover">
 <div class="theme-poptit">
 <a href="javascript:;" title="关闭" class="close">×</a>
 <h3>欢迎登陆</h3>
 </div>
 <div class="theme-popbod dform">
 <form class="theme-signin" method="post">
 <ol>
 <li><h4>你必须先登录!</h4></li>
 <li><strong>用户名:</strong><input class="ipt" type="text" size="20" id="txt1" onkeyup="showHint(this.value)" />&nbsp;&nbsp;<a><span id="txtHint1"></span></a></li>
 <li><strong>邮 箱:</strong><input class="ipt" type="text" size="20" id="txt2" onkeyup="showHint2(this.value)" />&nbsp;&nbsp;<a><span id="txtHint2"></span></a></li>
 <li><input class="btn btn-primary" type="submit" name="submit" value=" 注 册 " /></li>
 </ol>
 </form>
 </div>
 <center><a>已注册用户名admin 邮箱12345@qq.com</a></center>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>

参考文章:

jQuery弹出窗口

ajax实时通信

演示地址:空间已失效

感觉很棒!可以赞赏支持我哟~

1 打赏

评论 (2)

登录后评论
Hello, everything is going fine here and ofcourse every one is sharing
facts, that's genuinely fine, keep up writing.
Thank you. I'll keep it. English is not good, from the Baidu translation
QQ咨询 邮件咨询