php+js+mysql+ajax实现简单留言板功能，新手教程
S# php+js+mysql+ajax实现简单留言板功能，新手教程
文件结构
-
html文件夹
-
message.html
-
message.js
-
SendMessage.php
-
ShowMessage.php
-
DeleteMessage.php
message.html：
<html lang="ch">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>留言板title>
head>
<body onLoad="ShowMessage()">
<script src="message.js">script>
留言:<br>
<input type="text" id="message" name="message" value="">
<br>
用户:<br>
<input type="text" id="id" name="id" value="访客">
<br>
<button onClick="SendMessage(document.getElementById('message').value,document.getElementById('id').value)">提交button>
<button onClick="DeleteMessage()">删除全部留言button>
<p>
<div id="txtHint"><b>加载内容中...b>div>
p>
body>
html>message.js：
var xmlHttp
//
//提交函数
function SendMessage(str,str2)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="SendMessage.php"//文本发送到SendMessage.php处理
url=url+"?q="+str+"&p="+str2//多个值用“&”分割 留言文本q 用户名文本p get方式传递
url=url+"&sid="+Math.random()//添加一个随机数，以防服务器使用缓存文件
//alert(url)
xmlHttp.onreadystatechange=stateChanged //onreadystatechange 是一个事件句柄。它的值 (stateChange) 是一个函数的名称，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，才执行代码
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
//
//显示函数
function ShowMessage()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="ShowMessage.php"//显示ShowMessage.php 没有添加其他参数
url=url+"?sid="+Math.random()//添加一个随机数，以防服务器使用缓存文件
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
//
//删除函数
function DeleteMessage()
{
alert("删除所有留言？");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="DeleteMessage.php"//删除DeleteMessage.php 没有添加其他参数
url=url+"?sid="+Math.random()//添加一个随机数，以防服务器使用缓存文件
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText //执行的代码：这里输出文本到"txtHint"
}
}
function GetXmlHttpObject()//创建XmlHttp对象
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
SendMessage.php：
header("Content-type: text/html; charset=utf-8");
$servername = "xx.xx.cn";//数据库地址
$username = "xx";//数据库用户名
$password = "xxx";//密码
$link_id=mysql_connect($servername,$username,$password);
if(!$link_id){
echo "连接数据库出错"."";
}
else{
echo "连接数据库成功"."";
}
//
mysql_select_db("my2467976");//选择数据库
//
$sql_new = "CREATE TABLE Message (Id varchar(15),Time varchar(15),Message varchar(30))";
//这里设置文本大小，get方式也有限制大小
if (mysql_query($sql_new,$link_id))//新建表 persons
{
echo "新建表：".$sql_new."成功";
}
else
{
if(mysql_error()=="Table 'Message' already exists")
{
echo "已经存在Message表，无需建立"."";
}
else
{
echo "其他错误"."";
}
}
//
$q=$_GET["q"];//get传递的留言文本
$p=$_GET["p"];//用户名文本
$sql_new_l="INSERT INTO Message (Id, Time, Message) VALUES ('" . $p ."','".date("Y/m/d")." ".date("h:i:sa")."', '".$q."')";
mysql_query($sql_new_l);//新建记录
echo "新建记录：".$sql_new_l."";
/
$result = mysql_query("SELECT * FROM Message");
echo "
Id
Time
Message
";
while($row = mysql_fetch_array($result))
{
echo "";
echo "" . $row['Id'] . " ";
echo "" . $row['Time'] . " ";
echo "" . $row['Message'] . " ";
echo " ";
}
echo "
";
mysql_close($link_id);//关闭连接
?>ShowMessage.php：
header("Content-type: text/html; charset=utf-8");
$servername = "xx.xx.cn";//数据库地址
$username = "xx";//数据库用户名
$password = "xxx";//密码
$link_id=mysql_connect($servername,$username,$password);
if(!$link_id){
echo "连接数据库出错"."";
}
else{
echo "连接数据库成功"."";
}
//
mysql_select_db("my2467976");//选择数据库
//
//显示
$result = mysql_query("SELECT * FROM Message");//选择表中所有记录放在$result
echo "
Id
Time
Message
";
while($row = mysql_fetch_array($result))
{
echo "";
echo "" . $row['Id'] . " ";
echo "" . $row['Time'] . " ";
echo "" . $row['Message'] . " ";
echo " ";
}
echo "
";
mysql_close($link_id);//关闭连接
?>DeleteMessage.php：
header("Content-type: text/html; charset=utf-8");
$servername = "xx.xx.cn";//数据库地址
$username = "xx";//数据库用户名
$password = "xxx";//密码
$link_id=mysql_connect($servername,$username,$password);
if(!$link_id){
echo "连接数据库出错"."";
}
else{
echo "连接数据库成功"."";
}
//
mysql_select_db("my2467976");//选择数据库
//
if(mysql_query("DELETE FROM Message")){
//删除全部记录
echo "全部记录删除成功";
}
else
{
echo mysql_error();
}
/
//显示
$result = mysql_query("SELECT * FROM Message");
echo "
Id
Time
Message
";
while($row = mysql_fetch_array($result))
{
echo "";
echo "" . $row['Id'] . " ";
echo "" . $row['Time'] . " ";
echo "" . $row['Message'] . " ";
echo " ";
}
echo "
";
mysql_close($link_id);//关闭连接
?>序列图：
Created with Raphaël 2.1.0 message.html message.html message.js message.js SendMessage.php SendMessage.php ShowMessage.php ShowMessage.php DeletMessage.php DeletMessage.php SendMessage() ShowMessage() DeletMessage() echo texe echo texe echo texe
部分截图：
