ajax留言本

最新推荐文章于 2024-10-16 10:13:45 发布
最新推荐文章于 2024-10-16 10:13:45 发布
阅读量88 收藏
点赞数
分类专栏： ajax 文章标签： java javascript json ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjz764297625/article/details/88347584
版权
java bean代码： 
package com.bean;

public class Message {
	private int id;

	private String name;

	private String message;

	private String postdate;

	public Message(int id ,String name, String message, String postdate){
		this.id = id;
		this.name = name;
		this.message = message;
		this.postdate = postdate;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String getPostdate() {
		return postdate;
	}

	public void setPostdate(String postdate) {
		this.postdate = postdate;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

}


数据库访问代码： 
package com.dbAccess;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.bean.Message;

public class DB {

	private String username = "root";

	private String password = "admin";

	private String url = "jdbc:mysql://localhost:3306/guestbook";

	private String driver = "com.mysql.jdbc.Driver";

	private Connection connection = null;

	private Statement statement = null;

	private ResultSet resultSet = null;

	private Message msg = null;

	private String queryString ="select * from message";

	public boolean openConnection(){
		boolean b = false;
		try{
			Class.forName(driver).newInstance();
			connection = DriverManager.getConnection(url,username,password);
			b = true;
		}catch(Exception e){
			e.printStackTrace();
			b = false;
		}
		return b;
	}

	@SuppressWarnings("unchecked")
	public List query(){
		List list = new ArrayList();
		int id = 0;
		String name = null;
		String message = null;
		String postdate = null;
		try{
			this.openConnection();
			statement = connection.createStatement();
			resultSet = statement.executeQuery(queryString);
			while(resultSet.next()){
				id = resultSet.getInt("id");
				name = resultSet.getString("name");
				message = resultSet.getString("message");
				postdate = resultSet.getString("postdate");
				msg = new Message(id,name,message,postdate);
				list.add(msg);
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			this.closeResultSet();
			this.closeStatement();
			this.closeConnection();
		}
		return list;
	}

	public boolean insert(String sqlString){
		boolean b = false;
		try{
			this.openConnection();
			statement = connection.createStatement();
			statement.execute(sqlString);
			b = true;
		}catch(Exception e){
			e.printStackTrace();
			b = false;
		}
		return b;
	}

	public void closeConnection(){
		try{
			if(connection!=null){
				connection.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public void closeStatement(){
		try{
			if(statement!=null){
				statement.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public void closeResultSet(){
		try{
			if(resultSet!=null){
				resultSet.close();
			}
		}catch(Exception e){
			e.printStackTrace();
		}
	}

	public Connection getConnection() {
		return connection;
	}

	public void setConnection(Connection connection) {
		this.connection = connection;
	}

	public Statement getStatement() {
		return statement;
	}

	public void setStatement(Statement statement) {
		this.statement = statement;
	}

	public ResultSet getResultSet() {
		return resultSet;
	}

	public void setResultSet(ResultSet resultSet) {
		this.resultSet = resultSet;
	}

	public Message getMsg() {
		return msg;
	}

	public void setMsg(Message msg) {
		this.msg = msg;
	}

}



servlet代码： 
package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import com.dbAccess.DB;

@SuppressWarnings("unchecked")
public class GuestBook extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		String action = request.getParameter("action");
		if(action.equals("getAll")){
			getAll(request,response);
		}else if(action.equals("addNew")){
			addNew(request,response);
		}
	}

	protected void getAll(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		DB db = new DB();
		List list = db.query();
		PrintWriter out = response.getWriter();
		JSONArray jsonArray = JSONArray.fromObject(list);
		out.println(jsonArray);
		out.flush();
		out.close();
	}

	protected void addNew(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
		String name = request.getParameter("name");
		String message = request.getParameter("message");
		Calendar calendar = Calendar.getInstance();

		String postdate = calendar.get(Calendar.YEAR)+"-"+(calendar.get(Calendar.MONTH)+1)+"-"+calendar.get(Calendar.DATE);
		String sqlString = "insert into message(name ,message , postdate) values('"+name+"','"+message+"','"+postdate+"')";
		DB db = new DB();
		db.insert(sqlString);
		PrintWriter out = response.getWriter();
		out.println(1);
		out.flush();
		out.close();
	}
}


css样式文件： 
@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
}
html {
	background-color:#eee;
	height:100%;
}
body {
	padding:15px;
	font-size:11px;
	width:500px;
	background-color:#fff;
	height:100%;
	font-family:Tahoma;
	border-left:20px solid #ccc;
}
ul {
	list-style:none;
	border-top:1px solid #999;
	height:350px;
	overflow-x:auto;
	overflow-y:scroll;
}
span {
	font-weight:bold;
	font-size:12px;
}
span.date {
	margin-left:10px;
	font-weight:normal;
	font-size:11px;
}
li {
	border-bottom:1px dashed #666;
	line-height:20px;
}
form {
	margin-top:10px;
	border-top:1px solid #999;
}
label {
	display:block;
	line-height:20px;
	font-weight:bold;
	cursor:pointer;
	background-color:#999;
	color:#fff;
	margin:3px 0;
	padding-left:5px;
	width:100%;
}
#txtName , #txtContent {
	width:100%;
	font-size:11px;
}
#btnSubmit {
	display:block;
	margin-top:3px;
	border:1px solid #666;
	padding:2px 5px;
	width:100%;
}
.msgBox {
	font-size:11px;
}


javascript代码：
1、guestbook.js 
var url ='guestBook';

function init(){
	document.getElementById('btnSubmit').onclick = submitMessage;
	readMessages();
}

function readMessages(){

	var options = {
		method:'GET',
		parameters:'action=getAll',
		onLoading:function(){
		document.getElementById('loadingMsg').style.display = '';
		},
		onSuccess:function(x){
			var resBook = x.responseText;
			try{
				var messages = resBook;
				var messages = eval('('+resBook+')');

				for(var i = 0;i < messages.length; i++){
					displayMessage(messages[i]);
				}
				document.getElementById('loadingMsg').style.display = 'none';
				//document.getElementById('btnSubmit').disabled = false;
				doScroll();
			}catch(e){

			}
		},
		onFailure:function(){
			document.getElementById('loadingMsg').style.display = 'none';
			window.alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function displayMessage(data){

	var name = data.name;
	var date = data.postdate;
	var message = data.message;
	var span = document.createElement('span');
	var nameText = document.createTextNode(name);
	span.appendChild(nameText);
	var dateSpan = document.createElement('span');
	var dateText = document.createTextNode(date);
	dateSpan.appendChild(dateText);
	dateSpan.className = 'date';
	var p = document.createElement('p');
	var contentText = document.createTextNode(message);
	p.appendChild(contentText);
	var li = document.createElement('li');
	li.appendChild(span);
	li.appendChild(dateSpan);
	li.appendChild(p);
	document.getElementById('msgList').appendChild(li);
}

function submitMessage(){

	var name = document.getElementById('txtName').value;
	var message = document.getElementById('txtContent').value;

	var options = {
		method:'GET',
		parameters:'action=addNew&name='+escapeHTML(name)+'&message='+escapeHTML(message),
		onLoading:function(){
		document.getElementById('submitMsg').style.display='';
		document.getElementById('btnSubmit').disabled = true;
		},
		onSuccess:function(x){
			var resBack = x.responseText;
			if(resBack == 1){
				var date = new Date();
				var postDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				var msg = {
					name:name,
					message:message,
					postdate:postDate
				}
				displayMessage(msg);
				doScroll();
			}else{
				alert('Submit  failure.');
			}
			document.getElementById('submitMsg').style.display = 'none',
			document.getElementById('btnSubmit').disabled = false;
		},
		onFailure:function(){
			document.getElementById('submitMsg').style.display = 'none';
			document.getElementById('btnSubmit').disabled = true;
			alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function doScroll(){
	var height = document.getElementById('msgList').offsetHeight;
	var totalHeight = document.getElementById('msgList').scrollHeight;
	document.getElementById('msgList').scrollTop = totalHeight-height;
}

function escapeHTML(str){
	str = str.replace('<','<');
	str = str.replace('>','&gt');
	return str;
}

window.onload = init;


2、ajaxRequest.js代码： 
var url ='guestBook';

function init(){
	document.getElementById('btnSubmit').onclick = submitMessage;
	readMessages();
}

function readMessages(){

	var options = {
		method:'GET',
		parameters:'action=getAll',
		onLoading:function(){
		document.getElementById('loadingMsg').style.display = '';
		},
		onSuccess:function(x){
			var resBook = x.responseText;
			try{
				var messages = resBook;
				var messages = eval('('+resBook+')');

				for(var i = 0;i < messages.length; i++){
					displayMessage(messages[i]);
				}
				document.getElementById('loadingMsg').style.display = 'none';
				//document.getElementById('btnSubmit').disabled = false;
				doScroll();
			}catch(e){

			}
		},
		onFailure:function(){
			document.getElementById('loadingMsg').style.display = 'none';
			window.alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function displayMessage(data){

	var name = data.name;
	var date = data.postdate;
	var message = data.message;
	var span = document.createElement('span');
	var nameText = document.createTextNode(name);
	span.appendChild(nameText);
	var dateSpan = document.createElement('span');
	var dateText = document.createTextNode(date);
	dateSpan.appendChild(dateText);
	dateSpan.className = 'date';
	var p = document.createElement('p');
	var contentText = document.createTextNode(message);
	p.appendChild(contentText);
	var li = document.createElement('li');
	li.appendChild(span);
	li.appendChild(dateSpan);
	li.appendChild(p);
	document.getElementById('msgList').appendChild(li);
}

function submitMessage(){

	var name = document.getElementById('txtName').value;
	var message = document.getElementById('txtContent').value;

	var options = {
		method:'GET',
		parameters:'action=addNew&name='+escapeHTML(name)+'&message='+escapeHTML(message),
		onLoading:function(){
		document.getElementById('submitMsg').style.display='';
		document.getElementById('btnSubmit').disabled = true;
		},
		onSuccess:function(x){
			var resBack = x.responseText;
			if(resBack == 1){
				var date = new Date();
				var postDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				var msg = {
					name:name,
					message:message,
					postdate:postDate
				}
				displayMessage(msg);
				doScroll();
			}else{
				alert('Submit  failure.');
			}
			document.getElementById('submitMsg').style.display = 'none',
			document.getElementById('btnSubmit').disabled = false;
		},
		onFailure:function(){
			document.getElementById('submitMsg').style.display = 'none';
			document.getElementById('btnSubmit').disabled = true;
			alert('request failure.');
		}
	};
	ajaxRequest(url,options);
}

function doScroll(){
	var height = document.getElementById('msgList').offsetHeight;
	var totalHeight = document.getElementById('msgList').scrollHeight;
	document.getElementById('msgList').scrollTop = totalHeight-height;
}

function escapeHTML(str){
	str = str.replace('<','<');
	str = str.replace('>','&gt');
	return str;
}

window.onload = init;


html页面代码： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
       <link type="text/css" rel="stylesheet" href="css/style.css">
       <script type="text/javascript" src="script/ajaxRequest.js"></script>
       <script type="text/javascript" src="script/guestbook.js"></script>
	</head>

	<body>
		<h1>
			Guest book
			<span id="loadingMsg" style="display: none" class="msgBox">(loading...)</span>
		</h1>
		<ul id="msgList"></ul>
		<form name="fmMsg" id="fmMsg" action="?" method="post">
			<h2>
				Message
				<span id="submitMsg" style="display: none" class="msgBox">(loading...)</span>
			</h2>
			<label for="txtName">
				name
			</label>
			<input name="txtName" type="text" id="txtName" value="guest"
				onfocus="this.select();">
			<label for="txtContent">
				Message
			</label>
			<textarea rows="4" name="txtContent" id="txtContent"
				onfocus="this.select();">something to say...</textarea>
			<input type="button" value="click here to submit your message!"
				id="btnSubmit" >
		</form>
	</body>
</html>
yjz764297625
关注
专栏目录
AJAX实例--留言板
小允子的博客
05-31 2160
留言本         zmouse 说 : 内容 顶(0) |  踩(0) -->         显示更多...                              退出                      注册 用户名：          
AJAX留言板
小先生编程
01-02 542
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset
留言板php ajax,php ajax 留言板
weixin_42302763的博客
08-06 316
php ajax 留言板提供一款国人写的php ajax 留言板,他是利用了jquery php mysql ajax来实现php ajax 局部刷新留方板实例的喜欢就下载吧。php教程 ajax 留言板提供一款国人写的php ajax 留言板,他是利用了jquery php mysql教程 ajax来实现php ajax 局部刷新留方板实例的喜欢就下载吧。*/$link = @mysql_con...
Ajax留言本实现
360 free-dream
07-15 400
创建一个Ajax应用程序的步骤做一总结： 第一步：创建XMLHttpRequest对象。 第二步：使用XMLHttpRequest对象的Open方法创建请求。 第三步：使用XMLHttpRequest对象的send方法发送请求。 第四步：使用XMLHttpRequest对象的 onreadystatechange事件来捕获请求状态信息。 我们以一个完整留言板应用程序...
php 留言板项目 ajax,PHP Ajax留言板
weixin_31642733的博客
03-19 240
本案例代码已经提供下载，点击这里！AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。...
asp.net+ajax留言本
weixin_34080571的博客
03-16 137
没有了解ajax的时候，觉得很神秘，了解了之后，不就那么回事么（说笑） 今天我们不用任何框架，来实现一个简单的留言本,已经在Firefox和IE下测试正常 ajax就是“Asynchronous JavaScript and XML”的全称，即异步的javascript和xml,和我高中球队名字一样 用ajax之前我们首先要创建XMLHttpRequest对象，这是实现ajax的关键对象 ...
织梦ajax提交留言,织梦自定义表单通过ajax提交的实现方法
weixin_35851374的博客
08-05 237
自定义表单通过ajax判断，提交不用跳转页面，提高用户体验。具体方法如下：html表单代码部分，就提交按钮改成botton,，添加onclick事件表单代码：姓名：电话：手机：邮箱：留言：js代码(这个代码之前一定要引入jQuery库)：function add_ajaxmessage(){var name=document.getElementById("name");var tel =docu...
jQuery仿留言功能ajax,利用Ajax技术写一个迷你留言板WEB控件_jquery
weixin_39952182的博客
08-05 469
初学Ajax不久，自己写个小东西，以作学习日记留言板图片如下：样例地址：http://www.8dao.net/miniguest/首先，这里用的是Access数据库，便于移动。数据库很简单，表Guest，字段有ID，Name，Content要实现Ajax，利用asp.net ajax 1.0 bate是很方便的，在http://ajax.asp.net可以下载到。安装好后打开VS2005，新建一...
ajax实现
m0_56223907的博客
09-26 950
以前接触过现在模糊了，这里有详细总结了ajax各种用法和实现，帮助复习
利用JQuery实现的Ajax留言本
weixin_33690367的博客
12-28 431
　　这几天比较清闲一点，在网上逛时，看到有人在用这个轻量级的JS库，据说挺不错，自己就 开始学习一下。顺便写了这个简单的留言本，在这里提供给想学习JQuery的人作个参考。 功能很简单，具体也没有进行细节性的处理，如SQL防注入等都没有实现，只实现了发表留言、回复留言功能。 /Files/singleblue/JQueryNoteDemo.rar 转载于:https://www....
Ajax留言本源码 提供下载了
10-30
**Ajax留言本源码详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术通过JavaScript与后台服务器进行异步通信，提升了用户体验，使得网页...
[聊天留言]原创PHP+AJAX留言本_gbook.zip
03-18
【标题】：“[聊天留言]原创PHP+AJAX留言本_gbook.zip”指的是一个压缩包文件，其中包含了一个基于PHP和AJAX技术实现的在线聊天或留言本系统。这个系统可能是一个开源项目或者是一个教学示例，用于帮助开发者学习...
[聊天留言]笨小孩 PHP+MYSQL+AJAX 留言本_bxhbook.zip
03-13
【PHP+MYSQL+AJAX 留言本】是一个经典的Web开发示例，它结合了三种核心技术：PHP作为服务器端脚本语言处理数据，MySQL作为数据库存储和管理信息，而AJAX（异步JavaScript和XML）则用于实现页面的无刷新更新。...
Ajax留言本ASP.net+Access
03-16
内容索引:.NET源码,聊天留言,Ajax,留言本　Ajax留言本，Access数据库，数据库操作采用的是SqlHelper，意在练习AJAX技术，实现了无刷新留言，无刷新载入动画列表，以及发表留言框的动画移动等，留言时可以选择表情、...
【C++刷题】力扣-#121-买卖股票的最佳时机
最新发布
会写代码的饭桶
10-16 332
给定一个数组 prices，其中 prices[i] 表示第 i 天的股票价格。假设你可以在第 i 天买入并在第 j 天卖出股票（i ≤ j），设计一个算法来计算你所能获取的最大利润。注意你只能持有一股股票，并且你不能同时参与多笔交易（即在再次买入前必须卖出股票）。
基于SSM班级事务管理系统的设计
2401_87849773的博客
10-15 397
管理员账户功能包括：系统首页，个人中心，学生管理，班委管理，班会组织管理，健康档案管理，党员发展管理，党员培训管理，学生成绩管理。主要技术：Java,Spring,mybatis,mysql,jquery,html。班委账号功能包括：系统首页，学生管理，学生成绩管理，活动信息管理，班费通知管理。服务器：SpringBoot自带 apache tomcat。JDK版本：Java JDK1.8。数据库可视化工具： navicat。数据库版本： mysql5.7。开发系统：Windows。
Java安卓开发之Fragment开发（通俗易懂版）——第8章
一个脚本小子的博客
10-13 692
FragmentManager中的getSupportFragmentManager()方法不支持Activity，不论是旧版的FragmentManager还是新版的，因此我们要把继承Activity类改成继承AppCompatActivity类。
【SpringBoot的启动、处理请求整体流程（二）】
m0_50149847的博客
10-13 915
同时，如果文章有错误，也欢迎批评指正。本篇文章继之后，可以先阅读第一篇文章。
spring task的使用场景
qq_40603125的博客
10-13 362
spring任务调度框架约定的时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值