Ajax实现的留言本

zxingchao2005

浏览: 80416 次
性别:
来自: 北京

最近访客更多访客>>

linchers

xuewei97

xinger666

kanpiaoxue

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (83)

社区版块

存档分类

首先用mysql建立数据库及表notebook:

create table notebook(id int not null primary key auto_increment,title varchar(50),author varchar(50),content varchar(1000),date varhcar(50));

(1)liuyan.jsp(表现层)

<%@ page language="java" pageEncoding="gbk"%> <%@page import="com.zxc.struts.bean.ManagerPerson,java.util.List"%> <% String path = request.getContextPath(); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax NoteBook</title> <style type="text/css">  </style> <script type="text/javascript"> //将用户输入异步提交到服务器 function ajaxSubmit(){ //获取用户输入 var title=document.forms[0].title.value; var author=document.forms[0].author.value; var content=document.forms[0].content.value; //创建XMLHttpRequest对象 var xmlhttp; try{ xmlhttp=new XMLHttpRequest(); }catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //创建请求结果处理程序 xmlhttp.onreadystatechange=function(){ if (4==xmlhttp.readyState){ if (200==xmlhttp.status){ var date=xmlhttp.responseText; addToList(date); }else{ alert("error"); } } } //打开连接，true表示异步提交 xmlhttp.open("post", "servlet/SaveServlet", true); //当方法为post时需要如下设置http头 xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //发送数据 xmlhttp.send("title="+title+"&author="+author+"&content="+content); } //将用户输入显示到页面 function addToList(date){ //获取留言列表div容器 var msg=document.getElementById("msgList"); //创建dl标记及其子标记 var dl=document.createElement("dl"); var dt=document.createElement("dt"); var dd=document.createElement("dd"); var dd2=document.createElement("dd"); //将结点插入到相应的位置 if(msg.lastChild!=null){ msg.lastChild.appendChild(dl); } else{ msg.appendChild(dl); } dl.appendChild(dt); dl.appendChild(dd); dl.appendChild(dd2); //填充留言内容 dt.innerHTML="标题："+document.forms[0].title.value; dd.innerHTML="作者："+document.forms[0].author.value+"  日期："+date; dd2.innerHTML=document.forms[0].content.value; //清空用户输入框 document.forms[0].title.value=""; document.forms[0].author.value=""; document.forms[0].content.value=""; } </script> </head> <body> <% List list=(List)ManagerPerson.getNote();%> <div id="msgList"> <%if(list!=null&&list.size()>0){ %> <%for(int i=0;i<list.size();i++){ %> <%com.zxc.struts.bean.NoteBook note=(com.zxc.struts.bean.NoteBook)list.get(i);%> <dl> <dt> 标题：<%=note.getTitle()%></dt> <dd> 作者：<%=note.getAuthor()%>  日期：<%=note.getDate()%></dd> <dd><%=note.getContent()%></dd> </dl> <%} }%> </div> <div id="postBox"> <form name="theForm" method="post"> <dl> <dt> 发表您的留言 </dt> <dd> 标题： <input type="text" maxlength="150" size="45" name="title" /> </dd> <dd> 作者： <input type="text" maxlength="50" size="45" name="author" /> </dd> <dd> 内容： <textarea rows="5" cols="65" name="content"></textarea> </dd> <dd class="button"> <input type="button" onclick="ajaxSubmit()" value="提交" /> <input type="reset" value="重填" /> </dd> </dl> </form> </div> </body> </html>

(2)NoteBook.java(javabean)

package com.zxc.struts.bean; public class NoteBook { private String id; private String title; private String author; private String content; private String date; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getAuthor() { return author; } public void setAuthor(String author) { this.author = author; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } public void setDate(String date) { this.date = date; } public String getDate() { return date; } }

(3)DBAccess.java(取得数据库连接)

package com.zxc.struts.bean; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class DBAccess { /** * @param args */ public DBAccess(){ } public static Connection getConnection(){ try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e) { // TODO Auto-generated catch block System.out.println("驱动程序未找到"); e.printStackTrace(); } String url="jdbc:mysql://localhost:3306/person"; String user="root"; String password="123"; Connection conn=null; try { conn=DriverManager.getConnection(url, user, password); } catch (SQLException e) { // TODO Auto-generated catch block System.out.println("数据库连接出错啦!"); e.printStackTrace(); } System.out.println("Connection连接成功!"); return conn; } public static void main(String[] args) { // TODO Auto-generated method stub Connection connection=getConnection(); } }

(4)ManagerNote.java(数据访问层)

package com.zxc.struts.bean; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.Statement; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import com.zxc.struts.bean.DBAccess; public class ManagerNote { public static List getNote() { String sql = "select * from notebook"; Connection conn = DBAccess.getConnection(); PreparedStatement ps = null; ResultSet rs = null; int n = 0; List list = new ArrayList(); try { ps = conn.prepareStatement(sql); rs = ps.executeQuery(); while (rs.next()) { NoteBook note = new NoteBook(); note.setId(rs.getString("id")); note.setAuthor(rs.getString("author")); note.setTitle(rs.getString("title")); note.setContent(rs.getString("content")); note.setDate(rs.getString("date")); list.add(note); } } catch (Exception e) { e.printStackTrace(); } return list; } public static void insertNote(NoteBook book){ String sql = "insert into notebook(title,author,content,date) values(?,?,?,?)"; Connection conn = DBAccess.getConnection(); PreparedStatement ps = null; ResultSet rs = null; int n = 0; List list = new ArrayList(); try { ps = conn.prepareStatement(sql); ps.setString(1, book.getTitle()); ps.setString(2, book.getAuthor()); ps.setString(3, book.getContent()); ps.setString(4, book.getDate()); boolean i=ps.execute(); if(i) System.out.println("插入数据成功！"); else System.out.println("插入数据失败!"); } catch (Exception e) { e.printStackTrace(); } } }

(5)SaveServlet.java(处理ajax)

package servlet; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.zxc.struts.bean.ManagerNote; import com.zxc.struts.bean.NoteBook; public class SaveServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); NoteBook book=new NoteBook(); book.setTitle(request.getParameter("title")); book.setAuthor(request.getParameter("author")); book.setContent(request.getParameter("content")); book.setDate(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())); new ManagerNote().insertNote(book); response.getWriter().write(new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(new Date())); response.getWriter().flush(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } public void init() throws ServletException { // Put your code here } }

(6)web.xml(配置servlet)

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>SaveServlet</servlet-name> <servlet-class>servlet.SaveServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SaveServlet</servlet-name> <url-pattern>/servlet/SaveServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>liuyan.jsp</welcome-file> </welcome-file-list> </web-app>

(7)运行效果