AJAX注册记录

最新推荐文章于 2026-06-23 13:52:18 发布

原创最新推荐文章于 2026-06-23 13:52:18 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #xmlhttprequest #session #float #function

@html/js/css/Ajax 专栏收录该内容

289 篇文章

订阅专栏

内容比较多，一个个来

先说一下思路，reg.php页是处理页面,另外要用到zw.js和czw.js（这两个文件是当初测试传递中文数值的，，名字沿用下来了）还有pa.js和cpa.php以及rp.js和crp.php还有检测EMAIL的ma.js和cma.php..感觉篇幅不够完全记录。。因此捡重点的先说。

reg.php中的文本框设置onchange后触发相应的JS事件,JS文件接收到数据后进行数值长度的判断，并将判断结果与数值一起传送到相应的PHP处理页，PHP处理页或连接数据库或应用正则进行判断，并根据判断结果生成不同的值，完成后js则将取得的结果显示到reg.php中的相应 DIV,这样就实现了AJAX的预期功能，即不刷新页面，用户输入某数据后切换到另一文本框，即可以自动的显示该值是否可用。

关键点有这么几个，一个是中文的传递，做成之后看上去很轻松，实际上当初测试的时候，一直从test1测试到了test1X,才最终搞定。另外一个关键点是email的正则，这个也耗了不少时间，我手上的教程给的似乎不正确，这已经不是第一第二次了。第三个是关于两次输入密码的判断，现在做到的是在第二次输入密码进行判断，如果有BT的人注册喜欢从后面填写，那意味着还需要最终的修改，但是我观察DZ的密码判断，它也是在第二次判断的，因此时间宝贵，就先这样吧，先处理其他的问题，以后有时间了再来加强这个一次密码判断。

好了，废话不少，开始帖代码。

额。。忘记说了，数据库中的字段是这样子的，当然你也可以修改

表:user

id   int(4)                       否 auto_increment
user varchar(20) utf8_unicode_ci 否
pass varchar(20) utf8_unicode_ci 否
mail varchar(25) utf8_unicode_ci 否

我的数据库和页面都是使用utf8的编码的~

reg.php

<?php session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX注册</title>
<script language="javascript" src="zw.js"></script>
<script language="javascript" src="pa.js"></script>
<script language="javascript" src="rp.js"></script>
<script language="javascript" src="ma.js"></script>
</head>

<body>

<div style="; height:250px; float:left; margin-left:8px; margin-top:6px; background-color:#FFFFFF;
  border: solid 1px #D9D9D4">

  <div class="dh" style=" ; height:30px; text-align:left; color:#FFFFFF; padding-top:6px; padding-left:14px;
  background-image:url(bg1.jpg)">
  注册
  </div>
  <div style="; height:30px; float:left; padding:4px; font-size:14px; text-align:left">基本信息 ( * 为必填项) </div>
<?php
if($_POST[submit1]==true)
{
if($_SESSION[zw]!=""&&$_SESSION[rp]!=""&&$_SESSION[mail]!="")
{
$user=$_SESSION[zw];
$pass=$_SESSION[rp];
$mail=$_SESSION[mail];
include_once("bbs_conn.php");
$query=mysql_query("select * from `user` where `user` = '$user' ");
$myrow=mysql_fetch_array($query);
if($myrow==true)
{
echo"<meta http-equiv=/"refresh/" content=/"3; url=reg.php/">该用户已被注册...请您重新填写...";
}
else
{
$query=mysql_query("INSERT INTO `user` (`id` ,`user` ,`pass` , `mail` )VALUES (NULL , '$user', '$pass' , '$mail')");
if($query==true)
{
$_SESSION[user]="$user";
$_SESSION[pass]="$pass";
echo"<meta http-equiv=/"refresh/" content=/"3; url=index.php/">注册成功...将自动跳转到相关页面...";
}
else
{
echo"<meta http-equiv=/"refresh/" content=/"3; url=reg.php/">注册失败...请您重新填写...";
}
}
}
}
?>

  <div style="; height:30px; float:left; ">
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">用户名 *</div>
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">
   <input name="a" id="a" type="text" onChange="a()"></div>
   <div style="; float:left; font-size:12px; padding-top:8px;" id="zw"></div>
  </div>
  <div style="; height:30px; float:left; ">
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">密码 *</div>
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">
   <input name="b" id="b" type="password" onChange="b()"></div>
   <div style="; float:left; font-size:12px; padding-top:8px;" id="pa"></div>
  </div>
  <div style="; height:30px; float:left; ">
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">确认密码 *</div>
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">
   <input name="c" id="c" type="password" onChange="c()"></div>
   <div style="; float:left; font-size:12px; padding-top:8px;" id="rp"></div>
  </div>
  <div style="; height:30px; float:left; ">
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">Email *</div>
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">
   <input name="d" id="d" type="text" onChange="d()"></div>
   <div style="; float:left; font-size:12px; padding-top:8px;" id="ma"></div>
  </div>
  <div style="; height:30px; float:left; ">
   <div style="; float:left; padding:4px; font-size:14px; text-align:left"></div>
   <div style="; float:left; padding:4px; font-size:14px; text-align:left">
   <form action="reg.php" method="post" name="form1"><input name="submit1" type="submit" value="提交"></form></div>
  </div>
  </div>

</body>
</html>

真长。。。。。希望能够帖完。。。。。

关键的zw.js(传递中文值,判断中文用户名就靠它了)

function checkstr(str,digit){

var n=0;

for(i=0;i<str.length;i++){

function a() //name就是你要输入的参数
{
var xmlhttp = getXMLR();
if (xmlhttp){
var zw=document.getElementById("a").value;

if(checkstr(zw,20)){

var cd=1;

}else{

var cd=0;

}

var gotourl = 'czw.php';
xmlhttp.Open("POST",gotourl,true);
xmlhttp.setrequestheader("cache-control","no-cache");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = showZW;
xmlhttp.send("zw="+zw+'&cd='+cd);
}

function showZW() {
if (xmlhttp.readyState==4){

        var response = xmlhttp.responseText;
      document.getElementById('zw').innerHTML = response;

     }
}
}// JavaScript Document

注意其中的这两行代码

xmlhttp.setrequestheader("cache-control","no-cache");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
这两行短小精悍，然后直接POST过去，再接一下就OK了。。想当初还想破脑筋通过URLGET过去，最后还没接成功，不过地址栏上一大堆疑似乱码的东东，总不如咱们这POST简洁明了吧。。（其实是自己没掌握URLGET，汗一个。。）

还有一个关键点就是判断接收到数据是否超过长度，是zw.js中的function checkstr进行处理的，并将结果以cd的值发送到czw.php进行相应的处理

czw.php接收传来的中文数据（当然也可以是英文），连接数据库进行查询，并显示结果（该结果将再次返回zw.js，并接着 xmlhttp.onreadystatechange = showZW; 执行function showZW,将结果显示到reg.php中的ID为zw的DIV中）

czw.php (这个czw也是随意起的，意思是处理中文。。。)

<?php session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><?php include_once("bbs_conn.php");

     $zw=$_POST[zw];
$cd=$_POST[cd];

if($cd==0){

$query=mysql_query("SELECT * FROM `user` WHERE `user`='$zw' ");
     $myrow=mysql_fetch_array($query);
if ($myrow == true){

echo "已存在";

}else{
$_SESSION[zw]="$zw";
echo "可以注册";
}

}else{

echo"用户名过长，请您重新输入";

}

?>
</body>
</html>

恩，这三个页面就构成了无敌滴检测中文用户名的功能了~其中要用到session。而session好像跨不过form（不敢肯定）,因此 reg.php中会有这样奇怪的<form action="reg.php" method="post" name="form1"><input name="submit1" type="submit" value="提交"></form> 其实，这在用户填写好资料后按提交，在reg.php中的处理代码用相应的session的值进行判断

..好像写了不少了。。。后面还有密码的判断再次确认以及EMAIL的判断。。

密码的判断，也是要用到前面的判断长度的函数，也是到相应的PHP页进行处理，其实理论上来说，JS就可以处理了，因为它不需要连接数据库，不过需要生成session。。JS可以生成cookie啊，，，，，，，不过我比较喜欢session。。（毕竟放在服务器嘛，不比你放在客户段安全可靠？？当然，以后还是要用到的，不过我在想，cookie的功能能不能由session实现，恩！这是将来的研究方向~）

如果能够上传代码就好了。。

其实也是大同小异，不过为了不此文不被骂为太监文，因此冒汗帖出全部代码。。。。（别嫌我罗嗦，当初找很多资料就因为作者的语焉不详，而对于像我这样的小小鸟来说，无异于是无纸天书，因此，冒着被骂唐僧的危险，也宁死帖出与广大像我这样的菜菜鸟一起分享，希望大家有什么心得了也要帖出啊，有一个前提，就是不许骂别人菜。。高手谁不是从菜鸟起步的哇，是不。。）

pa.js

function checkstr(str,digit){

var n=0;

for(i=0;i<str.length;i++){

function b() //name就是你要输入的参数
{
var xmlhttp = getXMLR();
if (xmlhttp){
var pa=document.getElementById("b").value;

if(checkstr(pa,20)){                           //此处为检测长度的控件

var cd=1;

    }else{

var cd=0;

}

var gotourl = 'cpa.php?pa='+pa+'&cd='+cd;
xmlhttp.Open("GET",gotourl,true);
xmlhttp.onreadystatechange = showPA;
xmlhttp.send();
}

function showPA() {
if (xmlhttp.readyState==4){

        var response = xmlhttp.responseText;
      document.getElementById('pa').innerHTML = response;
     }
}
}// JavaScript Document

cpa.php

<?php session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><?php

$pa=$_GET[pa];
$cd=$_GET[cd];

if($cd==0)
{
$_SESSION[pa]="$pa";
echo"输入正确";
}
else
{
echo"密码过长，请您重新输入";
}
?>
</body>
</html>

rp.js

function checkstr(str,digit){

var n=0;

for(i=0;i<str.length;i++){

function c() //此处修改相应的函数
{
var xmlhttp = getXMLR();
if (xmlhttp){

var rp=document.getElementById("c").value; //此处需要修改变量

if(checkstr(rp,20)){                           //此处为检测长度的控件

var cd=1;

    }else{

var cd=0;

}

var gotourl = 'crp.php?rp='+rp+'&cd='+cd;

xmlhttp.Open("GET",gotourl,true);
xmlhttp.onreadystatechange = showRP;
xmlhttp.send();
}

function showRP() {
if (xmlhttp.readyState==4){

        var response = xmlhttp.responseText;
      document.getElementById('rp').innerHTML = response;

     }
}
}// JavaScript Document

crp.php

<?php session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><?php

$rp=$_GET[rp];

$cd=$_GET[cd];

if($cd==0)
{
if($_SESSION[pa]=="")
{
echo "请您输入密码";
}
else
{
$_SESSION[rp]=$rp;
if($_SESSION[rp]==$_SESSION[pa])
{
echo"输入正确";
}
else
{
echo"两次输入不一致,请您重新输入...";
}
}
}
else
{
echo"密码过长，请您重新输入";
}
?>
</body>
</html>

其实，上面的是一些逻辑判断，根据不同的需要可以修改。。。。。

接下来要说一下EMAIL的认证了，，说难不难，其实只要有好的正则，就成功了一半。。。。源码帖出。。。。

ma.js (email的简写，为了押韵。。)

function checkstr(str,digit){

var n=0;

for(i=0;i<str.length;i++){

function d() //name就是你要输入的参数
{
var xmlhttp = getXMLR();
if (xmlhttp){
var mail=document.getElementById("d").value;

if(checkstr(mail,25)){                           //此处为检测长度的控件

var cd=1;

    }else{

var cd=0;

}

var gotourl = 'cma.php?mail='+mail+'&cd='+cd;
xmlhttp.Open("GET",gotourl,true);
xmlhttp.onreadystatechange = showPA;
xmlhttp.send();
}

function showPA() {
if (xmlhttp.readyState==4){

        var response = xmlhttp.responseText;
      document.getElementById('ma').innerHTML = response;

     }
}
}// JavaScript Document

大同小异吧，下面是重点了，让无数人崩溃的正则将出现。。。（有时候觉得正则不是人写的，有种不人性的感觉。。。建议以后封装成函数之类的，要用调用出来就OK了。。。）

cma.php

<?php session_start(); ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<?php
function checkmail($mail)
{
     if(!eregi("^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+/.)+[a-z]{2,3}$",$mail)) //正则，如果有一不等于，判断为错
{
return false;
}
else                                                              //否则是正确的
{
return true;
}
}
?>
<?php                               //别嫌我写两个php。。上面一个基本不动的嘛，当它不存在好了。。

$mail=$_GET[mail];
$cd=$_GET[cd];

if(checkmail($mail) == true && $cd==0)
{
$_SESSION[mail]=$mail;
echo "输入正确";
}
else
{
if($cd==1)
{
echo "输入过长,请重新输入";
}
else
{
echo "格式不正确";
}
}
?>
</body>
</html>

OK,大功告成~~这是我写过的最长的一篇文章了，，其实代码占了很大篇幅，不过那也是俺写滴，虽然这篇文章不会被别人转载刊登到各大网站，但是毕竟是俺心血滴付出，以后有更OK的想法了，毕竟会再次更新，敬请关注本空间，哈哈~

照例要感谢一下各位前辈，没有你们的文章，我断然是写不出这篇“大”作的（字的数量很大。。）。非常感谢你们无私的作品~对俺这个小小鸟非常有帮助，另外要感谢俺滴两位老师，百度和GOOGLE，正是你们的指导，才有了今天的这个作品，以后，我还要写出更多更好的作品，以报答你们的厚爱~~再次感谢PHPCHINA，为俺提供了这个空间，来写这篇可能被后世千千万万人唾骂的文章。。

感谢完毕，收工~