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

来源：互联网发布：java数据结构与算法编辑：程序博客网时间：2024/05/19 17:49

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=stateChangedxmlHttp.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：

<?phpheader("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：

<?phpheader("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");//选择表中所有记录放在$resultecho "<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：

<?phpheader("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);//关闭连接?>

序列图：

部分截图：

删除留言

阅读全文

0 0