- 论坛徽章:
- 0
|
=====================================创建数据库==============================
数据库 (ajaxdb)
表名 message:mid(int(11) 非空 自动递增 主键 信息的ID) mtitle(varchar(255) 非空 信息的标题) mcontent(text 非空 内容) mdate(datetime 非空 日期) muid(int(11) 非空 点击数)
表名 users:uid(int(11) 非空 自动递增 主键 用户的ID) uaccount(varchar(50) 非空 用户的账号) upwd(varchar(50) 非空 密码) uemail(varchar(50) 非空 邮箱) uname(varchar 非空 用户的真实名字) udate(datetime 非空 日期)
==================================注册的div页面 ==========================================
<!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" c />
<title>ajax信息展示</title>
<link href="css/web.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="usernav"><a href="#">购物车</a><a href="#">登录</a><a href="#">注册</a></div>
<div id="nav">
<ul>
<li ><a href="#" class="cur">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">招聘</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="register">
<h2>Ajax注册</h2>
<form>
<fieldset><legend>基本资料</legend>
<ul>
<li><label>*用户名:</label><input name="uaccount" id="uaccount" type="text" /><span id="tip_uaccount"></span></li>
<li><label>*密码:</label><input name="upwd" id="upwd" type="password" /><span></span></li>
<li><label>*密码确认:</label><input name="urepwd" id="urepwd" type="password" /><span></span></li>
<li><label>Emal:</label><input name="uemail" id="uemail" type="text" /><span></span></li>
<li><label>姓名:</label><input name="uname" id="uname" type="text" /><span></span></li>
</ul>
</fieldset>
<fieldset><legend>提交资料</legend>
<p><input name="" type="button" value="注册" class="bt" /></p>
</fieldset>
</form>
</div>
</div>
<div id="bottom">世界之树--计算机信息专业</div>
</div>
</body>
</html>
=====================================注册css代码=======================
/* CSS Document */
*{ margin:0; padding:0;}
body{ background:url(../images/pagebg.jpg) fixed; font-size:12px; text-align:center;}
a{ color:#FFCC33; text-decoration:none;}
a:hover{ color:#666666; text-decoration:underline;}
#wrapper{ width:771px; margin:10px auto; }
#main{background-color:#fff;filter:alpha(opacity=80);-moz-opacity:0.80;opacity:0.80; border:1px dotted #313131;float:left; width:771px; margin-bottom:20px; padding-bottom:50px;}
#bottom{ clear:both; height:100px; line-height:100px; color:#fff; font-weight:600;}
/* header CSS */
#header{ background:url(../images/logo.gif) no-repeat left top; height:170px; position:relative;}
#usernav{ text-align:right; padding:20px;}
#usernav a{ color:#FFFFFF; margin:10px;}
#nav{ background:url(../images/navbg.gif) no-repeat right top; position:absolute; right:0px; top:105px; height:83px; width:568px;}
#nav ul{ list-style:none; padding-left:12px; padding-top:3px;}
#nav ul li{ float: left; }
#nav ul li a{ width:111px; height:75px; line-height:46px; background:url(../images/navbtbg1.gif) no-repeat; display:block; text-decoration:none; color:#999900; font-weight:600;}
#nav ul li a:hover,#nav ul li .cur{background:url(../images/navbtbg2.gif) no-repeat -2px 0px; color:#0000CC; font-weight:600; padding-top:30px;height:45px;}
/* main css */
#content,#register{width:500px;margin:30px auto; position:relative; background-color:#FFFFFF; padding:20px 10px;}
#content h2,#register h2{ font-size:18px; font-family:"幼圆"; text-align:left; padding-left:30px; font-weight:500; height:30px; line-height:30px; border-bottom:3px double #CC6600; margin-bottom:20px;}
#content ul{ padding:10px 20px;}
#content ul li{border-bottom:1px dotted #666; text-align:left; padding:20px 10px; cursor:pointer; list-style-position:inside; margin-bottom:5px;color:#0099FF; position:relative;}
#content ul li span{ margin-right:10px; font-weight:600; color:#666666}
#content ul li .message{ position:absolute; left:200px; bottom:0; background-color:#CCCCCC; width:400px; padding:0; margin:0;}
#content ul li .message .mcontent{ border:1px solid black; position:relative; left:-5px; top:-5px; background-color:#FFFFFF; padding:20px; line-height:20px; text-indent:2em; color:#333333;}
#register fieldset{ padding:20px; margin:10px;}
#register ul{ padding-left:50px; color:#666666; margin-top:10px;}
#register ul li{ clear:both; height:20px; line-height:20px; list-style:none; margin-bottom:10px;}
#register ul li label{ display:block; width:100px; float:left; text-align:right; margin-right:10px;}
#register ul li input{ float:left; width:120px; border:1px solid #333; height:20px; line-height:20px;}
#register ul li span{ display:block; float:left; margin-left:10px; color:#FF0000}
#register .bt{ border:1px solid #ccc; background-color:#6699FF; color:#FFFFFF; padding:3px 15px; cursor:pointer; margin-top:10px;}
========================================创建连接数据库的connect.php件==========
<?php
if(!mysql_connect("localhost","root","")) //第一个参数是主机名,第二个是账号,第三个是密码没有
{
exit('连接数据库失败!'); //失败就不执行下一条语句
}
if(!mysql_select_db("ajaxdb")) //选择数据库的名字
{
exit('选择数据库失败');
}
mysql_query("SET character_set_connection=gb2312,character_set_results=gb2312,character_set_client=gb2312");//消除连接数据库乱码转化为gb2312
?>
==============================创建注册客户端页面javascript(ajax.js)文件(异步功能)================
//JavaScript Document
function createXmlHttpRequest()
{
var xmlHttp; //声明xmlHttp
try //测试
{
xmlHttp=new XMLHttpRequest(); //生成新的异步请求
}
catch(e) //失败之后的处理
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp"); //生成新的旧时的异步请求
}
catch(e){}
}
if(!xmlHttp) alert("创建XMLhttpRequese失败");//假如生成异步请求失败..弹出对话框
else
return xmlHttp;//返回成功的请求xmlHttp
}
function g(elementid) //生成读取ID的函数
{
return document.getElementById(elementid);
}
////检测账号////////
var xmlHttp1=createXmlHttpRequest(); //调用异步请求函数
function checkAccount(account)
{
if(account!==) //账号不等于空
{
var url="message.php?type=checkaccount&account="+account.values; //声名一个路径并传递一个账号的值
xmlHttp1.open('get',url,true);//异步请求函数的打开方法(传送方式,路径,true是异步 flase是同步)
xmlHttp1.onreadystatechange=handleCheckAccount;//接受并处理服务端的数据 handleCheckAccount是一个函数用来接受服务端的数据
xmlHttp1.send(null);//发送到客户端
}
}
function handleCheckAccount()
{
if(xmlHttp1.readyState==4) //成功为4
{
if(xmlHttp1.status==200) //状态文件为200
{
if(xmlHttp1.responseText=='ok') //在服务端获取的数据是'ok'的话
g('tip_uaccount').innerHTML='该用户名可以使用'; //在html的span输出"该用户名可以使用"
else if(xmlHttp1.responseText=='no') //在服务端获取的数据是'on'的话
g('tip_uaccount').innerHTML='该用户名已经有人使用';
else
alert('请求失败;'+xmlHttp1.responseText);//什么都不是的话 就弹出对话框 显示错误
}
}
}
/////////////End 检测账号///////////////
//此教程来源于97xxoo教程网(www.97xxoo.org)查看完整的教程请点:http://www.97xxoo.org/article/1/2008/20081024118.shtml
===========================服务端的检测message.php============
<?php
header("Content-Type:text/html; charset=gb2312");//转化为gb2312
require_once("connect.php");//导入数据库连接文件
$type=$GET['type'];//接受过来的类型
if($type=='checkaccount')//接受过来的类型是checkaccount的话
{
$uaccount=$_GET['account']; //把账号附给变量
if(checkAccount($uaccount)) //用checkAccount函数检测
echo'no';//输出有人使用
else
echo'ok';//输出没有人使用
}
function checkAccount($uaccount){
$selectSQL="select count(*) from users where uaccount='$uaccount'"; //SQL语句检查有多少条纪录
$result=mysql_query($selectSQL);//执行数据语言
list($num)=mysql_fetch_row($result);//在用mysql_fetch_row函数获取一行的数据并把一个个数据附给list数组中变量$num中
if($num>0)//假如数组$num变量是大于0的话
return true;
else
return false;
}
?> |
|