留言板：简单的留言功能实现

记录学习的第一阶段

自从我开始学习Web一个月以来，照着视频课程写过不少的练习，所以当我粗略的学习了Web三件套和php+Mysql后。我决定要用自己的想法来实现留言板这个练习，来巩固自己的学习。毕竟纸上得来终觉浅，绝知此事要躬行，实践才是最好的老师。（网上留言板编写教程很多，建议还是先靠自己的想法来实现）虽然这个案例实现的功能不多，但是编写的过程还是遇到了挺多的问题，特别是接口的编写。（第一次写接口的时候真的是特别懵）。在这里也很感谢我同学对我的指引，让我在学习的路少走了很多弯路，感谢感谢感谢~。本来想把功能完善的更好一点（因为急着进入下一阶段的学习，所以实现了简单的留言功能之后就停下来了，以后一定回头把它完善好）

功能实现
1. 提交留言，通过php把留言写入Mysql数据库，再通过AJAX从数据库查询最后一条留言显示出来实现局部刷新。
1. 页面初始化，通过php查询Mysql数据库里的留言，全部显示出来。
1. 心动画的实现（心会跳动）

效果图：

html代码：

<!DOCTYPE html>
<html lang="en"><style>div#dem p{margin-top: 10px;margin-bottom: 10px;font-size: 24px;}</style>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="lyb.css?v=12"><script>//按钮按下执行的脚本function newmessage(){var x =document.getElementById("srname").value;var y =document.getElementById("srmessage").value;if(x==""){alert("必须填写姓名！");return false;}else if (y == "") {alert("必须填写留言！");return false;}else{document.getElementById("srname").value="";//提交以后清空内容document.getElementById("srmessage").value="";//提交以后清空内容var xhttp = new XMLHttpRequest();xhttp.onreadystatechange=function(){if(this.readyState==4&&this.status==200){     //先向数据库添加数据，当服务器响应则查询最后一个留言var xhttp = new XMLHttpRequest();{xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) { //向服务器响应则查询最后一个留言var box=document.getElementById("dem");var str=this.responseText;var strArray=str.split("}{");//以}{分割字段for(var i=0;i<strArray.length;i++){if(i=strArray.length-1){strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符strArray[i]=strArray[i].replace("}","");var str=strArray[i];var obj=document.createElement("p");obj.innerText=str;document.getElementById("dem").appendChild(obj);}}}               }};xhttp.open("post", "/chaxun.php", true);//向数据库添加数据请求xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交，以头文件形式？xhttp.send(); }}xhttp.open("POST", "/xxx.php", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交，以头文件形式？xhttp.send(JSON.stringify({"name" :x,"message" :y}));$("#name").val(""); }}</script><script>         //界面初始化执行脚本，查询留言并显示出来。window.onload=function(){var xhttp = new XMLHttpRequest();{xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {var box=document.getElementById("dem");var str=this.responseText;var strArray=str.split("}{");//以}{分割字段for(var i=0;i<strArray.length;i++){strArray[i]=strArray[i].replace("{","");//去掉字符串里的某个字符strArray[i]=strArray[i].replace("}","");var str=strArray[i];var obj=document.createElement("p");obj.innerText=str;document.getElementById("dem").appendChild(obj);}}               }};xhttp.open("post", "/chaxun.php", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//加了这个就可以以表单方式提交，以头文件形式？xhttp.send(); } </script>
</head>
<body><div id="body"><header><p class="headerP">十三毕业留言</p><button class="dl">管理员登录</button></header><input id="srname" class="inputname" type="text" name="name" placeholder="请输入你的姓名(必填)"><textarea id="srmessage" class="inputtextarea" name="newmessage" placeholder="请输入你想写的留言（必填）"></textarea><button  class="buttontj" onclick="newmessage()">提交留言</button><span class="heart"><!--用来设置心形动画的实现--><span class="heart-left"></span><span class="heart-right"></span></span><div id="dem"></div></div></body>
</html>

css样式：

*{ margin: 0;padding: 0;}
p.headerP{line-height: 50px;display: inline-block;color: white;margin-left:10px;font-size: 18px;
}
div#body{margin-left: 20%;margin-right: 20%;
}
body{background:url(picture/320539.jpg);background-size: 1920px 1080px;background-repeat:repeat-y;position: relative;}
header{height: 50px;background-color: #32393F;margin-bottom: 10px;display: flex;justify-content: space-between;border-radius: 6px;margin-top: 16px;}
button.dl{width:100px ;text-align: center;background-color:#4facfe;font-size: 16px;color: white;border-radius: 13px;    height: 40px;margin-top: 5px;margin-right: 5px;border: white;
}
input.inputname{height: 30px;width:99.8%;font-size: 18px;border-radius: 10px;outline: none;border: white;}
textarea.inputtextarea{width: 100%;height: 120px;font-size: 22px;margin-top: 10px;border-radius: 13px;outline: none;border: white;
}
button.buttontj{width: 100%;height: 40px;border: white;background-color: #027BFE;border-radius: 18px;color: white;font-size: 20px;margin-top: 10px;margin-bottom: 12px;
}span{display: inline-block;}
.heart-left,.heart-right{    /*画出基本样式*/width: 25px;height: 40px;background-color: red;border-top-left-radius: 20px;border-top-right-radius: 20px;}.heart-left{  /*通过旋转变为心形*/transform: rotateZ(-45deg);}.heart-right{  /*通过旋转变为心形*/transform: translateX(-14px) rotateZ(45deg);}@keyframes xin{30%{transform: scale(1.3);}100%{transform: scale(1);}}.heart{animation: xin 1.5s infinite;margin-left: 10px;}

php程序：

<html>
<body>
<?php
$a=file_get_contents ( 'php://input' );
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="insert into t1(info) values('$a')";
mysqli_query($link,$query);
?>
</body>
</html>

<?php
$link=mysqli_connect("localhost","root","123456");
$db_selectd=mysqli_select_db($link,"lzm");
$query="select*from t1 order by into desc limit 1";
var_dump(mysqli_query($link,$query));?>

代码全部在这里了，喜欢的点赞关注码走吧。（其中或多或少可能会有一点bug，新人勿喷）

留言板：简单的留言功能实现相关推荐

网站留言板防重复留言_2020微信公众号怎么开通原创、赞赏、留言功能？【5月更新】...
其实这些问题大部分可以在腾讯客服网站文档里面找到,知乎的回答如果答的比较久的话就不太可信了,但是腾讯官网都是一直在更新的,我在官网选取了这些问题做一个解读,并结合自己的经验对没有涉及到的再做一个比较细 ...
java留言板_java实现留言板功能实例
Messages.html message board 留言板姓名: E-mail: 主题: 留言: 查看留言 ? MessageData.java package message; public ...
网站留言板防重复留言_如何做一个2000年风格复古的个人网站（3）创建个人小站-主页...
上一章,我们创建了首页. 下面我们准备开始做主页. 先新建一个页面:home.htm 主页相对于展现个性的首页,内容要多很多,那么就要讲究排版了. 当时流程的排版还是用 table,div 大概是 2 ...
网上商城留言板的实现——留言展示到留言板
留言展示到留言板功能描述:当用户访问留言板(guestbook.jsp)时,会调用GetMessageServlet.java,该servlet内调用数据库操作(MessageDaoImpl.jav ...
玛塔留言板无刷新留言板程序
简介: 简单的无新留言板程序,主要用于技术交流,jQuery的简单应用,SQLite数据库. 网盘下载地址: http://kekewl.cc/TmQCeiczJv90 图片:
网站留言板防重复留言_公众号留言板怎么弄
我相信,许多最近才开始运行公共帐户的流量用户会非常沮丧.阅读文章的人很多,但是根本没有与粉丝互动.山顶向远处呼喊.如果有回应,也许是他自己的回声.这种孤独的创造力缺乏动力! 有人说您可以在写文章时在评 ...
PHP留言板 PHP在线咨询留言系统
本文详细介绍本人最近做的一个PHP留言板(PHP在线咨询留言系统) 主要功能: 留言,回复,注册,管理. 技术细节: 1.注册与登录页面无刷新(AJAX)验证: 2.一条留言下可显示多条回复(一 ...
uniapp 微信小程序留言板+动态显示新增留言
功能介绍:实现一个留言板的显示,以及留言后可以动态显示. 话不多说,let's start ! 先上页面(略丑,非重点) 上页面代码(头像图片暂且写死的): <view class=" ...
php怎么写更新代码,留言板代码_php留言板更新代码
摘要腾兴网为您分享:php留言板更新代码,政务易,小米手环,无忧兼职,同花顺等软件知识,以及中国农技推广app,化学元素周期表高清,杀毒软件2012,汽车票app,艾肯micu驱动,instagra ...
php留言板展示页面,PHP开发留言板教程之留言板发布与展示
创建"ressage.php"文件我们将页面分成了三个部分,一部分是放入了我们的背景图,一部分是展示我们的留言,一部分是我们发布留言的页面我们对三个div分别进行了CSS布局, ...

留言板：简单的留言功能实现

记录学习的第一阶段

留言板：简单的留言功能实现相关推荐

最新文章

热门文章