使用Ajax+MYSQL+PHP实现留言墙

属于简易版，比较适合没有后台基础的初学者入门，使用Ajax响应php对mysql数据库进行操作，将网站搭建在xampp中，开启Apache服务器利用公网ip进行对网页的访问

登录界面

T-main.html文件

HTML

用户名

密码

input class="T-main-but" type="button" onclick="sign()"value="登 录">

input class="T-main-but" type="button" onclick="register()" value="注 册">

JS

function sign(){

var lg=document.getElementById('login');

var name=document.getElementById('username');

var password=document.getElementById('userpassword');

if(name.value!=""&&password.value!=""){

lg.action='sign.php';

lg.submit();}

else{document.getElementById('hint').innerHTML="用户名或密码不能为空！";}

};

function register(){

window.location="register.html";

}

CSS

html body div span applet object iframe h1 h2 p a{margin:0px;padding:0px;}

body {

background: url(img/sakura.jpg)no-repeat center 0px;

background-attachment: fixed;

background-size: cover;

}

#T-main-box{

width: 100%;

/*color:rgba();*/

}

#T-main-login{

font-family:"微软雅黑" ;

padding: 2em;

width: 65%;

margin: 3.5em auto;

/*height: 100px;*/

background-color: rgba(0,3,6,0.4);

font-family: "arial";

color: #ffc;

}

.T-main-login-inp{

/*width: 100%;*/

/*margin: 2em;*/

margin-bottom:1em;

color: #ffc;

}

#spanName{

color: #f90;

}

#T-main-login input[type='text'],#T-main-login input[type='password']{

font-family: "微软雅黑";

cursor: pointer;

font-size: 1.5em;

color: #fff;

width: 100%;

border:none;

outline: none;

border-bottom: 2px solid #999;

background-color: inherit;

}

.T-main-but{

-webkit-appearance:none;

/*display: block;*/

margin: auto;

margin-top:15px;

border:none;

width: 100%;

height:3.5em;

background-color: rgba(3,3,6,0.6);

color: #ccc;

font-size: 1em;

cursor: pointer;

}

.T-main-but:hover{

background-color: #fff;

color:#000;

}

登陆成功页面

Tmainpage.html文件

HTML

</textare><br></p> <p><input id="messinp" type="submit" onclick="message()" value="发表"><br></p> <p></form></p> <p></div></p> <p></div></p> <p><div id="Tpage-main"></p> <p><div id="message"></p> <p></div></p> <p></div></p> <p>dir id="Tpage-foot"><br></p> <p></dir></p> <p></div></p> <p><b>JS</b></p> <p>function getCookie(c_name)<br></p> <p>{</p> <p>if (document.cookie.length>0)</p> <p>{</p> <p>c_start=document.cookie.indexOf(c_name + "=")</p> <p>if (c_start!=-1)</p> <p>{</p> <p>c_start=c_start + c_name.length+1</p> <p>c_end=document.cookie.indexOf(";",c_start)</p> <p>if (c_end==-1) c_end=document.cookie.length</p> <p>return unescape(document.cookie.substring(c_start,c_end))</p> <p>}</p> <p>}</p> <p>return "";</p> <p>}</p> <p>var usersname=getCookie('usersname');</p> <p>document.getElementById('item3').innerHTML="welcome,"+usersname;</p> <p>var xmlHttp</p> <p>function message()</p> <p>{</p> <p>var str=document.getElementById("Metext");</p> <p>if (str.length==0)</p> <p>{</p> <p>// document.getElementById("spanName").innerHTML=""</p> <p>return</p> <p>}</p> <p>xmlHttp=GetXmlHttpObject()</p> <p>if (xmlHttp==null)</p> <p>{</p> <p>alert ("Browser does not support HTTP Request")</p> <p>return</p> <p>}</p> <p>var url="refresh.php"</p> <p>url=url+"?uname="+retval</p> <p>url=url+"&sid="+Math.random()</p> <p>xmlHttp.onreadystatechange=stateChanged</p> <p>xmlHttp.open("POST",url,true)</p> <p>xmlHttp.send(null)</p> <p>}</p> <p>function stateChanged()</p> <p>{</p> <p>if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")</p> <p>{</p> <p>document.getElementById("message").innerHTML=xmlHttp.responseText</p> <p>}</p> <p>}</p> <p>function GetXmlHttpObject()</p> <p>{</p> <p>var xmlHttp=null;</p> <p>try</p> <p>{</p> <p>// Firefox, Opera 8.0+, Safari</p> <p>xmlHttp=new XMLHttpRequest();</p> <p>}</p> <p>catch (e)</p> <p>{</p> <p>// Internet Explorer</p> <p>try</p> <p>{</p> <p>xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");</p> <p>}</p> <p>catch (e)</p> <p>{</p> <p>xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");</p> <p>}</p> <p>}</p> <p>return xmlHttp;</p> <p>}</p> <p><b>CSS</b></p> <p>html,body,div,span,applet,object,iframe,h1,h2,p,a{outline: none;margin:0;padding:0;}<br></p> <p>body{</p> <p>}</p> <p>#Tpage{</p> <p>width:100%;</p> <p>height:100%;</p> <p>/*padding: 20px;*/</p> <p>/*width: inherit;*/</p> <p>/*background-color: rgba(200,230,100,0.8);*/</p> <p>font-family: "微软雅黑";</p> <p>background: url(img/sakura.jpg) ;</p> <p>background-size:100%;</p> <p>background-attachment: fixed;</p> <p>background-size: cover;</p> <p>}</p> <p>#Tpage #logo{</p> <p>height: 3.5em;</p> <p>width: 7em;</p> <p>}</p> <p>#top-fiexd{</p> <p>position: fixed;</p> <p>width: 100%;</p> <p>height: 60px;</p> <p>background-color: #633;</p> <p>opacity: 0.9;</p> <p>display: -webkit-flex;</p> <p>}</p> <p>.item{</p> <p>height: inherit;;</p> <p>}</p> <p>#item3{</p> <p>text-align: center;</p> <p>line-height: 60px;</p> <p>font-size: "微软雅黑";</p> <p>color: #fff;</p> <p>}#Tpage-body{</p> <p>text-align: center;</p> <p>width: 100%;</p> <p>/*background-color:#fff; */</p> <p>}</p> <p>#Tpage-top{</p> <p>padding-top:100px;</p> <p>width: 100%;</p> <p>display: -webkit-flex;</p> <p>text-align: center;</p> <p>/*background-color: #ccc;*/</p> <p>}</p> <p>#Tpage-main{</p> <p>width: 100%;</p> <p>text-align: center;</p> <p>/*background-color: #000;*/</p> <p>padding-bottom:20px;</p> <p>}</p> <p>#Mesbox{</p> <p>width: 80%;</p> <p>margin: auto;</p> <p>height: 200px;</p> <p>flex: 1;</p> <p>text-align: center;</p> <p>}</p> <p>#Metext{</p> <p>border:none;</p> <p>box-shadow:2px 2px 15px #933;</p> <p>-moz-box-shadow:inset 0 0 15 #993;</p> <p>-webkit-box-shadow:inset 2px 2px 15px #933;</p> <p>outline: none;</p> <p>font-family: "微软雅黑";</p> <p>border-radius: 10px;</p> <p>padding: 10px;</p> <p>resize:none;</p> <p>display: block;</p> <p>width: 80%;</p> <p>height: 100px;</p> <p>margin: auto;</p> <p>background-color: #ccc;</p> <p>opacity: 0.9;</p> <p>font-size: 1.5em;</p> <p>color: #333;</p> <p>margin-bottom: 10px;</p> <p>}</p> <p>#messinp{</p> <p>-webkit-appearance:none;</p> <p>border-radius: 10px;</p> <p>margin: auto;</p> <p>border-radius: 10px;</p> <p>padding: 10px;</p> <p>width: 80%;</p> <p>height: 40px;</p> <p>background-color: #ccc;</p> <p>opacity: 0.9;</p> <p>margin: auto;</p> <p>border:none;</p> <p>font-size: 1em;</p> <p>cursor: pointer;</p> <p>letter-spacing:20px;</p> <p>font-family: "微软雅黑";</p> <p>}</p> <p>#messinp:hover{</p> <p>background-color: #9cc;</p> <p>color: #fff;</p> <p>}</p> <p>#message{</p> <p>margin: auto;</p> <p>width: 80%;</p> <p>/*background-color: #deb887;*/</p> <p>opacity: 0.8;</p> <p>}</p> <p>#message table{</p> <p>text-align: center;</p> <p>width:100%;</p> <p>/*font-family:  Arial, "微软雅黑";*/</p> <p>}</p> <p>#message table td{</p> <p>/*display: block;*/</p> <p>/*height: 10em;*/</p> <p>font-size: 1em;</p> <p>word-break: break-all;</p> <p>word-wrap: break-word;</p> <p>}</p> <p>#message tr:nth-child(odd) td{</p> <p>border-radius: 10px;</p> <p>background: #9c6;</p> <p>color: #036;</p> <p>}</p> <p>#message tr:nth-child(even) td{</p> <p>border-radius: 10px;</p> <p>background: #ffc;</p> <p>color: #c66;</p> <p>}</p> <p>#message sub{</p> <p>display: block;</p> <p>width: inherit;</p> <p>}</p> <p>sup{color:#933;}</p> <p><br></p> <p><b>sign.php文件-处理登录</b></p> <p><?php<br></p> <p>header("Content-type:text/html;charset=utf-8");</p> <p>$uname=$_POST['username'];</p> <p>$upassword=$_POST['userpassword'];</p> <p>$con = mysql_connect("localhost:3306","root","sa123");</p> <p>if (!$con)</p> <p>{</p> <p>die('Could not connect: ' . mysql_error());</p> <p>}</p> <p>mysql_select_db("my_db", $con);</p> <p>$result = mysql_query("SELECT * FROM user</p> <p>WHERE uname='$uname' and upassword='$upassword'");</p> <p>if($row = mysql_fetch_array($result))</p> <p>{</p> <p>setCookie("usersname","$uname",time()+2*7*24*3600);</p> <p>//设置cookies</p> <p>// echo $row['FirstName'] . " " . $row['LastName'];</p> <p>// echo "<br>";</p> <p>echo "";</p> <p>}else{</p> <p>echo "登录失败，该用户不存在...请重新登录";</p> <p>}</p> <p>?></p> <p><b>register.html文件</b><br></p> <p><div id="T-main-box"><br></p> <p><form id="login" action="" method="post"><br></p> <p><div id="T-main-login"><br></p> <p><div class="T-main-login-inp"><br></p> <p><h2>请输入用户名</h2><br></p> <p><input type="text" name="username" id="username" onblur="showHint(this.value)"><br></p> <p><p id="spanName"></p></p> <p></div></p> <p>div class="T-main-login-inp"><br></p> <p><h2>请输入密码</h2><br></p> <p><input type="Password" name="userpassword" id="userpassword"><br></p> <p></div></p> <p><div class="T-main-login-inp"><br></p> <p>input class="T-main-but" type="button" onclick="register()" value="注 册"><br></p> <p></div></p> <p></div></p> <p></form></p> <p><b>//Ajax<br></b></p> <p><i>var xmlHttp</i></p> <p><i>function showHint(str)</i></p> <p><i>{</i></p> <p><i>if (str.length==0)</i></p> <p><i>{</i></p> <p><i>document.getElementById("spanName").innerHTML=""</i></p> <p><i>return</i></p> <p><i>}</i></p> <p><i>xmlHttp=GetXmlHttpObject()</i></p> <p><i>if (xmlHttp==null)</i></p> <p><i>{</i></p> <p><i>alert ("Browser does not support HTTP Request")</i></p> <p><i>return</i></p> <p><i>}</i></p> <p><i>var url="ajaxregister.php"</i></p> <p><i>url=url+"?username="+str</i></p> <p><i>url=url+"&sid="+Math.random()</i></p> <p><i>xmlHttp.onreadystatechange=stateChanged</i></p> <p><i>xmlHttp.open("GET",url,true)</i></p> <p><i>xmlHttp.send(null)</i></p> <p><i>}</i></p> <p><i>function stateChanged()</i></p> <p><i>{</i></p> <p><i>if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")</i></p> <p><i>{</i></p> <p><i>document.getElementById("spanName").innerHTML=xmlHttp.responseText</i></p> <p><i>}</i></p> <p><i>}</i></p> <p><i>function GetXmlHttpObject()</i></p> <p><i>{</i></p> <p><i>var xmlHttp=null;</i></p> <p><i>try</i></p> <p><i>{</i></p> <p><i>// Firefox, Opera 8.0+, Safari</i></p> <p><i>xmlHttp=new XMLHttpRequest();</i></p> <p><i>}</i></p> <p><i>catch (e)</i></p> <p><i>{</i></p> <p><i>// Internet Explorer</i></p> <p><i>try</i></p> <p><i>{</i></p> <p><i>xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");</i></p> <p><i>}</i></p> <p><i>catch (e)</i></p> <p><i>{</i></p> <p><i>xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");</i></p> <p><i>}</i></p> <p><i>}</i></p> <p><i>return xmlHttp;</i></p> <p><i>}</i></p> <p>function register(){<br></p> <p>var lg=document.getElementById('login');</p> <p>lg.action='register.php';</p> <p>if(xmlHttp.responseText=="该用户名可用"){</p> <p>lg.submit();}</p> <p>}</p> <p><br></p> <p><b>ajaxregister.php文件-检测用户输入的用户名是否已存在数据库</b><br></p> <p><b></b><?php<br></p> <p>error_reporting(E_ERROR);</p> <p>ini_set("display_errors","Off");</p> <p>// //屏蔽php警告</p> <p>header("Content-type:text/html;charset=utf-8");</p> <p>$uname=$_GET['username'];</p> <p>$con = mysql_connect("localhost:3306","root","sa123");</p> <p>if (!$con)</p> <p>{</p> <p>die('Could not connect: ' . mysql_error());</p> <p>}</p> <p>mysql_select_db("my_db", $con);</p> <p>$result = mysql_query("SELECT * FROM user</p> <p>WHERE uname='$uname'");</p> <p>// if(mysql_fetch_array($result))</p> <p>//   {</p> <p>//$response="用户名已存在";</p> <p>//   }else{</p> <p>//$response="该用户名可用";</p> <p>//   }</p> <p>if($rows=mysql_num_rows($result))</p> <p>{</p> <p>$response="用户名已存在";</p> <p>}</p> <p>else</p> <p>{</p> <p>$response="该用户名可用";</p> <p>}</p> <p>echo $response;</p> <p>?></p> <p><b>register.php文件-处理注册信息</b><br></p> <p><?php<br></p> <p>header("Content-type:text/html;charset=utf-8");</p> <p>$uname=$_POST['username'];</p> <p>$upassword=$_POST['userpassword'];</p> <p>$con=mysql_connect("127.0.0.1:3306","root","sa123");</p> <p>if (!$con) {</p> <p>die('Could not connect: ' . mysql_error());</p> <p>}</p> <p>mysql_select_db("my_db", $con);</p> <p>if(mysql_query("INSERT INTO user (uname, upassword)</p> <p>VALUES ('$uname', '$upassword')")){</p> <p>echo "注册成功！请重新登录..";</p> <p>// echo "111";</p> <p>}</p> <p>else{</p> <p>echo "注册失败！再试一遍呗";</p> <p>}</p> <p>// while($row = mysql_fetch_array($result))</p> <p>// {</p> <p>// echo "</p> <div> "; //排版代码 </div> <p></p> <p>// echo $row['uname'] . "<br>";</p> <p>// echo ""; //排版代码</p> <p>// }</p> <p>mysql_close($con);</p> <p>?></p> <p><b>message.php文件-处理提交的留言信息</b><br></p> <p><?php</p> <p>error_reporting(E_ERROR);</p> <p>ini_set("display_errors","Off");</p> <p>header("Content-type:text/html;charset=utf-8");</p> <p>$Metext=$_POST['Metext'];</p> <p>$uname=$_COOKIE['usersname'];</p> <p>// echo "$uname";</p> <p>// echo "$Metext";</p> <p>date_default_timezone_set('Asia/Shanghai');//设置中国时间</p> <p>$time=date('y-m-d H:i:s',time());//h表示12小时制,H表示24小时制</p> <p>// echo "$time";</p> <p>$con=mysql_connect("localhost:3306","root","sa123");</p> <p>if (!$con) {</p> <p>die('Could not connect: ' . mysql_error());</p> <p>}</p> <p>mysql_select_db("my_db", $con);</p> <p>if(mysql_query("INSERT INTO metexts VALUES ('$uname', '$Metext','$time')")){</p> <p>echo "";</p> <p>// echo "111";</p> <p>}</p> <p>else{</p> <p>echo "留言失败！";</p> <p>}</p> <p>?></p> <p><br></p> <p><b>messagesuccess.php-提取留言信息页面</b><br></p> <p><div id="Tpage"><br></p> <p><div id="top-fiexd"><br></p> <p><span class="item"><br></p> <p><img id="logo" src="img/logo.png"><br></p> <p></span></p> <p><span class="item"><br></p> <p><span class="item" id="item3"><br></p> <p><?php echo "welcome,";echo$_COOKIE["usersname"];  ?><br></p> <p></span></p> <p></div></p> <p><div id="Tpage-body"><br></p> <p><div id="Tpage-top"><br></p> <p><div id="Mesbox"><br></p> <p><form id="Messageinput" action="message.php" method="POST"><br></p> <p>textarea id="Metext" name="Metext">

error_reporting(E_ERROR);

ini_set("display_errors","Off");

// //屏蔽php警告

header("Content-type:text/html;charset=utf-8");

$con=mysql_connect("localhost:3306","root","sa123");

if (!$con) {

die('Could not connect: ' . mysql_error());

}

mysql_select_db("my_db", $con);

$sql = "SELECT * FROM metexts order by mdate desc";

$query = mysql_query($sql);

while($row = mysql_fetch_array($query)){

?>

2016.10.10