使用servlet+ajax将数据存入数据库实现简易留言板

先上图~~
加载界面同时加载历史留言

发表留言字数超出限制禁用按钮

发表留言成功~

下面贴代码 message_board.html


<body>
<nav class="navbar navbar-default navbar-static-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"></button><a class="navbar-brand" style="font-size: 30px;color: #fff;" href="index.html">首页</a></div></div>
</nav><div style="width: 550px; margin: 0 auto;"><div class="inputMessage"><textarea id="textArea" rows="3" cols="70" name="msg" placeholder=" 说点什么吧！"></textarea><div style="padding-bottom: 5px;"><input type="text" name="name" autocomplete="off" class="input-name" placeholder=" 请输入昵称"><button type="submit" class="btn btn-primary submitMsg">发表</button><label id="limitSize">50</label><span>/</span><span>50</span></div></div><div><ul><li class="li-admin"><hr><div class="mname-admin">admin</div><div>大家好！文明留言，从我做起~</div><div>2019-04-01 17：02：58</div><hr></li></ul></div><div><ul id="ul"></ul></div></div><script src="js/jquery-2.1.0.js"></script><script src="js/bootstrap.min.js"></script><script>// 发表留言时用append插入div语句var comment = null;function div(name,msg,time) {comment = '<li>\n' +'<hr>\n' +'<div class="mname">' + name +'</div>\n' +'<div class="mmsg">' + msg +'</div>\n' +'<div class="mtime">' + time +'</div>\n' +'<hr>\n' +'</li>';}// 加载页面时调用的添加div语句的方法function addBox(data_display) {$.each(JSON.parse(data_display),function(index,obj){$("#ul").append('<li>\n' +'<hr>\n' +//获取名字"<div class='mname'>"+obj['mname']+"</div>"+//获取留言"<div class='mmsg'>"+obj['mmsg']+"</div>"+//获取留言时间"<div class='mtime'>"+obj['mtime']+"</div>"+'<hr>\n' +"</li>");});}$(function () {// 页面加载时从数据库读取留言数据$.post("displayMsgServlet",function (data_display) {addBox(data_display);});// 设置留言最长为50个字符var long = $("#limitSize");$("#textArea").bind("input propertychange",function () {long.html(50 - this.value.length);if (this.value.length > 50) {long.css("color","red");// 禁用发表按钮$(".submitMsg").attr("disabled",true);} else {long.css("color","black");$(".submitMsg").attr("disabled",false);}});// 提交留言$(".submitMsg").click(function () {var _name = $(".input-name").val();var _msg = $("#textArea").val();if (_msg != "" && _name != "") {/*** sensitiveWordsServlet 使用filter铭感词过滤 * 并使用JDBC将昵称 过滤后的留言和 时间存入到数据库中*/$.post("sensitiveWordsServlet", {name: _name, msg: _msg}, function (data_submit) {alert("留言成功！");div(data_submit.name,data_submit.msg,data_submit.time);$("#ul").append(comment);// 清空留言框中的内容$("#textArea").val("");}, "json");} else {alert("请输入留言或昵称！请检查");}});});</script>
</body>
</html>

接着是 DisplayMsgServlet.java

package com.cangwu.msgboard;import com.cangwu.utils.DruidUtils;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;/*** @Author: Cangwu* @Date: 2019/4/7 21:17*/
@WebServlet("/displayMsgServlet")
public class DisplayMsgServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");// 查询已有留言QueryRunner runner = new QueryRunner(DruidUtils.getDataSource());String sql = "select * from tb_msgboard";List<Message> messages = null;try {messages = runner.query(sql, new BeanListHandler<Message>(Message.class));} catch (SQLException e) {e.printStackTrace();}ObjectMapper mapper = new ObjectMapper();// 将对象转为json字符串String json = mapper.writeValueAsString(messages);// 向前台输出到data_display中response.getWriter().write(json);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request,response);}
}

DruidUtils.java JDBC工具类：

package com.cangwu.utils;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;/*** @Author: Cangwu* @Date: 2019/4/1 22:48*/
public class DruidUtils {private static DataSource ds ;static {try {// 加载配置文件Properties pro = new Properties();pro.load(DruidUtils.class.getClassLoader().getResourceAsStream("druid.properties"));// 获取DataSourceds = DruidDataSourceFactory.createDataSource(pro);} catch (Exception e) {e.printStackTrace();}}/*** 获取连接*/public static Connection getConnection() throws SQLException {return ds.getConnection();}/*** 释放资源*/public static void close(Statement stmt , Connection conn) {close(null,stmt,conn);}public static void close(ResultSet rs, Statement stmt, Connection conn ) {if (rs != null ) {try {rs.close();} catch (SQLException e) {e.printStackTrace();}}if (stmt != null ) {try {stmt.close();} catch (SQLException e) {e.printStackTrace();}}if (conn != null ) {try {conn.close();} catch (SQLException e) {e.printStackTrace();}}}/*** 获取连接池的方法*/public static DataSource getDataSource() {return ds;}
}

Message.java 是含有三个参数的bean文件这里就不贴啦
private String mname;
private String mmsg;
private String mtime;

小白努力学习中有问题欢迎指出哈！~

2021-7-22 更新

贴一个代码地址：https://github.com/cangwuwuwu/msgBoard
由于很早之前写的所以没测试过是否还能正常运行了。贴个代码仅供参考

JavaWeb简易留言板 servlet+ajax+mysql相关推荐

java 留言板源码_jsp+servlet+javabean实现简易留言板（包含数据库文件）
[实例简介] jsp+servlet+javabean实现简易留言板(包含数据库文件) 简单体验MVC设计模式 jsp:视图,与用户打交道:servlet:控制器,请求分配转发,联系视图层与模型层:j ...
vue生命周期，组件，slot替换，tab切换，简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分效果预览 html部分 <textarea name="text" cols="3 ...
html简单留言板教程,JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下今天的案例主要是对节点进行操作创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
[练习]简易留言板制作
[练习]简易留言板制作
php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
MVC框架简易留言板实例
MVC是一种软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller),即为MVC. 首先创建一个数据库 use master -- ...

JavaWeb简易留言板 servlet+ajax+mysql

使用servlet+ajax将数据存入数据库实现简易留言板

小白努力学习中有问题欢迎指出哈！~

2021-7-22 更新

JavaWeb简易留言板 servlet+ajax+mysql相关推荐

最新文章

热门文章

JavaWeb简易留言板 servlet+ajax+mysql

使用servlet+ajax将数据存入数据库实现简易留言板

小白努力学习中 有问题欢迎指出哈！~

2021-7-22 更新

JavaWeb简易留言板 servlet+ajax+mysql相关推荐

最新文章

热门文章

小白努力学习中有问题欢迎指出哈！~