php+js+mysql+ajax实现简单留言板功能，新手教程

最新推荐文章于 2021-03-16 10:55:49 发布

snoopy_21

最新推荐文章于 2021-03-16 10:55:49 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： mysql ajax php html javascript

本文链接：https://blog.youkuaiyun.com/qq_29598161/article/details/72486487

本文介绍了一个简单的留言板系统的实现方法，通过PHP处理后台逻辑，JavaScript与Ajax完成前后端交互，MySQL作为数据库存储留言信息。该系统具备提交留言、显示留言及删除全部留言的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

S# php+js+mysql+ajax实现简单留言板功能，新手教程

文件结构

html文件夹

message.html

message.js

SendMessage.php

ShowMessage.php

DeleteMessage.php

message.html：

<!DOCTYPE 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：

<?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 "连接数据库出错"."</br>";
}
else{
    echo "连接数据库成功"."</br>";
}
//////////////////////////////////////////////////////////////////////////////
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."成功</br>";
  }
else
  {
      if(mysql_error()=="Table 'Message' already exists")
      {
        echo "已经存在Message表，无需建立"."</br>";
      }
      else
      {
          echo "其他错误"."</br>";
      }
  }
//////////////////////////////////////////////////////////////////////////////
$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."</br>";
/////////////////////////////////////////////////////////////////////////////////
$result = mysql_query("SELECT * FROM Message");
echo "<table border='1'>
<tr>
<th>Id</th>
<th>Time</th>
<th>Message</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Id'] . "</td>";
  echo "<td>" . $row['Time'] . "</td>";
  echo "<td>" . $row['Message'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($link_id);//关闭连接
?>

ShowMessage.php：

<?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 "连接数据库出错"."</br>";
}
else{
    echo "连接数据库成功"."</br>";
}
//////////////////////////////////////////////////////////////////////////////
mysql_select_db("my2467976");//选择数据库
//////////////////////////////////////////////////////////////////////////////
//显示
$result = mysql_query("SELECT * FROM Message");//选择表中所有记录放在$result
echo "<table border='1'>
<tr>
<th>Id</th>
<th>Time</th>
<th>Message</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Id'] . "</td>";
  echo "<td>" . $row['Time'] . "</td>";
  echo "<td>" . $row['Message'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($link_id);//关闭连接
?>

DeleteMessage.php：

<?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 "连接数据库出错"."</br>";
}
else{
    echo "连接数据库成功"."</br>";
}
//////////////////////////////////////////////////////////////////////////////
mysql_select_db("my2467976");//选择数据库
//////////////////////////////////////////////////////////////////////////////
if(mysql_query("DELETE FROM Message")){//删除全部记录
echo "全部记录删除成功";
}
else
{
 echo mysql_error();    
}
/////////////////////////////////////////////////////////////////////////////////
//显示
$result = mysql_query("SELECT * FROM Message");
echo "<table border='1'>
<tr>
<th>Id</th>
<th>Time</th>
<th>Message</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['Id'] . "</td>";
  echo "<td>" . $row['Time'] . "</td>";
  echo "<td>" . $row['Message'] . "</td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($link_id);//关闭连接
?>

序列图：

部分截图：

删除留言