top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
会员注册 利用Ajax异步实时判断会员名是否可以注册
编辑yang 发布时间2014-09-11 浏览量3312 来源本站编辑 特大
摘要:这是在刚学ajax时,所用的原生js,当然,现在可能都没有在用原生js了,都用jquery封闭好的ajax,但了解一下原程序也不错的。

       这是在刚学ajax时,所用的原生js,当然,现在可能都没有在用原生js了,都用jquery封闭好的ajax,但了解一下原程序也不错的。

       原来的会员注册都是在提交资料后,再判断会员是否注册过,如果所填的会员名已经被注册过了,则返回注册页面,这样影响到用户的体验,现在做的是用户只要在文本框中输入会员名,即可知道该会员名是否已经被注册过。看如下代码:

1、注册页面代码(命名为:userreg.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员注册</title>
<script language="javascript" type="text/javascript" src="myajax.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="name" id="name" onblur="checkuser()" />
  </label>
</form><div id="userstate"></div>
</body>
</html>

       在上面的代码中,引用了myajax.js,该语句调用的是以下的js文件

       onblur="checkuser()"  与myajax.js中的第二个函数名对应,即为当离开文本框后,就执行checkuser函数

2、Js代码(命名为:myajax.js)

var xmlhttp;
function S_xmlhttprequest(){
    if(window.activexobject){
        xmlhttp=new activexobject('microsoft.xmlhttp');
        }else if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
    }
}
function checkuser(){
    uservalue=document.form1.name.value;
    S_xmlhttprequest();
    xmlhttp.open("get","checkuser.php?id="+encodeURI(uservalue),true);
    xmlhttp.onreadystatechange=phptext;//当ajax执行完后,执行phptext函数
    xmlhttp.setRequestHeader("If-Modified-Since","0");  xmlhttp.send(null);
}
function phptext(){
    if(xmlhttp.readyState==1){
        document.getElementById('userstate').innerHTML="正在检测中...";
    }
    if(xmlhttp.readyState==4){
        var userstate=xmlhttp.responseText;
        document.getElementById('userstate').innerHTML=userstate;
    }
}

       xmlhttp.open("get","checkuser.php?id="+encodeURI(uservalue),true);

       通过GET方式传值给usercheck.php文件。

       document.getElementById('userstate').innerHTML=userstate;

       userstate是通过checkuser.php返回来的字符,把该字符赋值给div的id为userstate里。

3、PHP代码(命名为:checkuser.php)

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php
include("conn.php");
$xm=$_GET[id];
$sql="select * from admin where xm='$xm'";
$q=mysql_query($sql);
if(is_array(mysql_fetch_row($q))){
    echo "不可以注册";
    }else{
        echo "可以注册";
}
?>

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

       加上本句,是让php输出为utf-8编码的字符串,不然会乱码。

标签  技巧网页制作网站开发

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新