<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 惠大美景< / title >
< link rel = "shortcut icon" href = "img/github-red.png" type = "image/x-icon" / >
< link rel = "stylesheet" href = "css/messageBoardCSS.css" >
< link rel = "stylesheet" href = "css/style.css" >
< script src = "js/script.js" > < / script >
< script src = "js/jquery-3.6.0.js" > < / script >
< / head >
< body >
< div class = "header" >
< div class = "header-logo" >
< a href = "index.html" > < img src = "img/HZUlogo.png" > < / a >
< / div >
< / div >
< div class = "navbar" >
< a href = "index.html" > < img class = "button_home" src = "img/home.png" > < span > 首页< / span > < / a >
< a href = "HZUScenery.html" > < img class = "button_page" src = "img/camera.png" > < span > 惠院风光< / span > < / a >
<!-- <a href="#"><img class="button_friends" src="img/github.png"> <span>小组介绍</span></a> -->
< a href = "messageBoard.html" > < img class = "button_ico" src = "img/message-square.png" > < span > 留言板< / span > < / a >
< / div >
< div class = "row" >
< div class = "main" >
< div class = "messageShow" >
< div class = "box" >
< div class = "left" >
< span class = "sendTime" > < / span >
< / div >
< div class = "center" >
< span class = "guestName" >
殷宏禧
< / span >
< / div >
< div class = "right" >
生活就像海洋，只有意志坚定的人才能到达彼岸。
< span class = "sendTime" > ---2022年06月10日 22:32:14< / span >
< / div >
< / div >
< div class = "box" >
< div class = "left" >
天行健，君子以自强不息。
< span class = "sendTime" > ---2022年06月10日 22:41:34< / span >
< / div >
< div class = "center" >
< span class = "guestName" >
叶仕鹏
< / span >
< / div >
< div class = "right" >
< span class = "sendTime" > < / span >
< / div >
< / div >
< div class = "box" >
< div class = "left" >
< span class = "sendTime" > < / span >
< / div >
< div class = "center" >
< span class = "guestName" >
叶炜城
< / span >
< / div >
< div class = "right" >
逐梦世界舞台，问鼎人生精彩。
< span class = "sendTime" > ---2022年06月11日 18:34:14< / span >
< / div >
< / div >
< div class = "box" >
< div class = "left" >
Simplicity is prerequisite for reliability.
< span class = "sendTime" > ---2022年06月14日 14:21:56< / span >
< / div >
< div class = "center" >
< span class = "guestName" >
Edsger-Dijkstra
< / span >
< / div >
< div class = "right" >
< span class = "sendTime" > < / span >
< / div >
< / div >
< / div >
<!-- <div class="messageShow"> -->
<!-- <div class="guestMessage"> -->
<!-- <h1 class="guestName">访问者1</h1> -->
<!-- <div class="messageText"> -->
<!-- <p>说了什么。。。说了什么。。。说了什么。。。说了什么。。。说了什么。。。说了什么。。。说了什么。。。说了什么。。。</p> -->
<!-- </div> -->
<!-- <span class="sendTime">2022： ： -->
<!-- </div> -->
<!-- </div> -->
< / div >
< div class = "side" >
< div class = "messageBoardOuter" >
< form id = "form" action = "/TeamWebProject/GuestMessageServlet" method = "post" class = "agile_form" >
< div class = "icon1" >
< i > *邮箱< / i >
< input placeholder = "xxxxxxxx@xxx.com" name = "email" type = "email" required = "" value = "" >
< / div >
< div class = "icon1 w3ls-name1" >
< i > *昵称< / i >
< input placeholder = "你的名字" name = "nickname" type = "text" required = "" value = "" >
< / div >
< div class = "icon2" >
< i > 联系方式< / i >
< input placeholder = " " name = "contact" type = "text" required = "" value = "" >
< / div >
< div class = "clear" > < / div >
< h6 > *说点什么吧< / h6 >
< textarea name = "messageText" class = "w3l_summary" required = "" > < / textarea >
< input id = "submitBtn" type = "button" value = "提交留言" >
< script >
/*对用户表单的填写进行检查*/
$(function () {
/*检查邮箱*/
$("input[name=email]").blur(function () {
var email = $("input[name=email]").val();
var flag = false;
var message = "";
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(email ==''){
message = "邮箱不能为空！";
}else if(!myreg.test(email)){
message = "请输入有效的邮箱地址！";
}else{
flag = true;
}
if(!flag){
//错误提示
$(".errorMessage").html(message);
$("#submitBtn").attr("disabled","disabled");
}else{
//正确提示
$(".errorMessage").html("");
$("#submitBtn").removeAttr("disabled");
}
});
//检查昵称
$("input[name=nickname]").blur(function () {
var email = $("input[name=nickname]").val();
var flag = false;
var message = "";
var myreg = /^[\u4e00-\u9fa5]|[a-zA-Z]$/;
if(email ==''){
message = "昵称不能为空！";
}else if(!myreg.test(email)){
message = "请输入有效的昵称！ （ ， ）
}else{
flag = true;
}
if(!flag){
//错误提示
$(".errorMessage").html(message);
$("#submitBtn").attr("disabled","disabled");
}else{
//正确提示
$(".errorMessage").html("");
$("#submitBtn").removeAttr("disabled");
}
});
//检查文本长度
$("textarea[name=messageText]").blur(function () {
var email = $("textarea[name=messageText]").val();
var flag = false;
var message = "";
var myreg = /.{3,400}/;
if(email ==''){
message = "文章不能为空！";
}else if(!myreg.test(email)){
message = "请输入有效的文章！ （ ）
}else{
flag = true;
}
if(!flag){
//错误提示
$(".errorMessage").html(message);
$("#submitBtn").attr("disabled","disabled");
}else{
//正确提示
$(".errorMessage").html("");
$("#submitBtn").removeAttr("disabled");
}
});
})
< / script >
< / form >
< br >
< span style = "font-size: 20px;color: red;font-weight: bold" class = "errorMessage" > < / span >
<!-- <button id="submit">提交留言</button> -->
<!-- 使用AJAX提交表单并且实时刷新留言板&每次载入页面时进行刷新 -->
< script >
$(function (){
// alert("页面加载完成，自动调用此方法：检测服务器是否存有留言");
$.ajax({
url: "GuestMessageServlet",
type: "post",
dataType: "text",
// data: {method:"load",messageNum:$(".box").length.toString()},
data: {method:"load"},
success: function (result) {
if(result!=null){
// alert("得到服务器的数据为："+result+"类型为"+typeof result);
/*将字符串转化为json对象数组*/
var jsonObjs = JSON.parse(result);
// alert("jsonObjs="+jsonObjs+"jsonObjs的数据类型为"+typeof jsonObjs);
for (var i = 0; i < jsonObjs.length ; i + + ) {
var item = jsonObjs[i];
// alert("email="+item.email+" nickname="+item.nickname+" contact="+item.contact+" messageText="+item.messageText+" messageID="+item.messageID+" sendTime="+item.sendTime);
$(".messageShow").append("< div class = \"box\" > \n" +
" < div class = \"left\" > \n" +
" < span class = \"sendTime\" > < / span > \n" +
" < / div > \n" +
" < div class = \"center\" > \n" +
" < span class = \"guestName\" > \n" +
" \n" +
" < / span > \n" +
" < / div > \n" +
" < div class = \"right\" > \n" +
" \n" +
" < span class = \"sendTime\" > < / span > \n" +
" < / div > \n" +
" < / div > ");
$(".box:last .guestName").text(item.nickname);
if (item.messageID % 2 != 0){
// alert("ID是奇数");
$(".box:last .right").html(item.messageText+"< p > < span class = \"sendTime\" > ---"+item.sendTime+"< / span > ");
// $(".box:last .right .sendTime").text("item.sendTime");
}else {
// alert("ID是偶数");
$(".box:last .left").html(item.messageText+"< p > < span class = \"sendTime\" > ---"+item.sendTime+"< / span > ");
// $(".box:last .left .sendTime").text("item.sendTime");
}
}
}
}
});
/*设置提交留言按钮*/
$("#submitBtn").click(function () {
if ($("input[name=email]").val()==""|$("input[name=nickname]").val()==""|$("textarea[name=messageText]").val()==""){
alert("请按要求填写信息");
return;
}
// $("#submitBtn").attr("disabled","true");
$.ajax({
url: "GuestMessageServlet",
type: "post",
dataType: "json",
data: $('#form').serialize(),
success: function (result) {
/*接收服务器的值*/
// alert("email="+result.email+" nickname="+result.nickname+" contact="+result.contact+" messageText="+result.messageText+" messageID="+result.messageID+" sendTime="+result.sendTime);
// alert("服务器传来的数据类型为="+typeof result);
//根据留言数量判断显示的位置
$(".messageShow").append("< div class = \"box\" > \n" +
" < div class = \"left\" > \n" +
" < span class = \"sendTime\" > < / span > \n" +
" < / div > \n" +
" < div class = \"center\" > \n" +
" < span class = \"guestName\" > \n" +
" \n" +
" < / span > \n" +
" < / div > \n" +
" < div class = \"right\" > \n" +
" \n" +
" < span class = \"sendTime\" > < / span > \n" +
" < / div > \n" +
" < / div > ");
$(".box:last .guestName").text(result.nickname);
if (result.messageID % 2 != 0){
// alert("ID是奇数");
$(".box:last .right").html(result.messageText+"< p > < span class = \"sendTime\" > ---"+result.sendTime+"< / span > ");
// $(".box:last .right .sendTime").text(result.sendTime);
}else {
// alert("ID是偶数");
$(".box:last .left").html(result.messageText+"< p > < span class = \"sendTime\" > ---"+result.sendTime+"< / span > ");
// $(".box:last .left .sendTime").text(result.sendTime);
}
/*清空填好的值*/
$("#form")[0].reset();
}
})
// alert($('#form').serialize());
// $.getJSON("http://localhost:8080/TeamWebProject/GuestMessageServlet","action=jQuerySerialize& " +
// $("#form").serialize(),
// function (data) {
// });
})
})
< / script >
< / div >
< / div >
< / div >
< div class = "footer" >
< div class = "copyright" >
Copyright © 2021-2022
< strong > < a href = "//www.zerotwo.red/" target = "_blank" > zerotwo.red< / a > < / strong > All Rights Reserved. 备案号：< a target = "_blank" rel = "nofollow" href = "https://beian.miit.gov.cn/" > 粤ICP备2021155110号< / a >
< / div >
< / div >
< / body >
< / html >
