论坛首页 → 入门讨论版 → AJAX →

动态加载的FAQ

 
浏览 138 次
主题：动态加载的FAQ
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • tianshi0253
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 32
  • 积分: 0
  • 来自: 北京
最后更新时间：2008-07-13
引用

共五个文件。

DBConn.java

package com.javaeye.tianshi0253;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBConn {
	private String dbUrl = "jdbc:mysql://localhost:3306/Examples";
	private String user = "root";
	private String password = "1225312";
	Connection conn;
	PreparedStatement pstmt;
	ResultSet rs;

	public DBConn() {
		conn = null;
		pstmt = null;
		rs = null;
	}

	public Connection getConn() {

		try {
			Class.forName("com.mysql.jdbc.Driver").newInstance();
			//System.out.println("setup 1");
			try {
				conn = DriverManager.getConnection(dbUrl, user, password);
				//System.out.println("setup 2");
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		return conn;
	}

	public void getPrepraredStatement() {

		// return null;
	}

	public void closeAll() {

		if (rs != null) {
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		if (pstmt != null) {
			try {
				pstmt.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

		if (conn != null) {
			try {
				conn.close();
				//System.out.println("Conn closed!");
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

}

 

MyJsp.jsp:

<%@page import="java.sql.*" contentType="text/html;charset=gb2312" %>
<jsp:useBean id="DBConn" class="com.javaeye.tianshi0253.DBConn" scope="page"></jsp:useBean>
<script type="text/javascript" src="js/function.js"></script>
<link type="text/css" rel="stylesheet" href="css/base.css"/>
<html>
  <head>
    <title>My JSP 'MyJsp.jsp' starting page</title>
  </head>
  <body>
    <%
     	String sql="select id,faq from faq order by id asc";
     	Connection conn=null;
     	PreparedStatement pstmt=null;
     	ResultSet rs=null;
     	try{
     		conn = DBConn.getConn();
     		pstmt = conn.prepareStatement(sql);
     		rs = pstmt.executeQuery();
     		String str;
     		while(rs.next()){
     		str = new String(rs.getString(2).getBytes("ISO-8859-1"),"GB2312");
     			%>
     			<div class="question">
     			<a href="#" onclick="loadFAQ(<%=rs.getInt(1) %>);return false;">
     			<%=str %></a></div>
     			<div id=faqDetail<%=rs.getInt(1)%> class="answer"></div>
     			<% 
     		}
     	}catch(SQLException e){
     		System.out.println(e.toString());
     	}finally{
     		
			DBConn.closeAll();
     	}
     	%>
     
  </body>
</html>

 

 

read_faq.jsp(后台处理页面)

<%@page import="java.sql.*" contentType="text/html;charset=gb2312"%>
<jsp:useBean id="DBConn" class="com.javaeye.tianshi0253.DBConn"
	scope="page"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
		<title>Insert title here</title>
	</head>
	<body>
		<%
			out.clear();
			String faqldStr = request.getParameter("faqld");
			//out.println(faqldStr);
			String faqDetail = null;
			if (faqldStr != null) {
				int faqld = Integer.parseInt(faqldStr);
			//	out.println(faqld);
				String sql = "select detail from faq where id = ?";
				Connection conn = null;
				PreparedStatement pstmt = null;
				ResultSet rs = null;
				String info="setup 1";
				try {
					conn = DBConn.getConn();
					//out.println("Setup 1");
					pstmt = conn.prepareStatement(sql);
					pstmt.setInt(1, faqld);
					rs = pstmt.executeQuery();
					if (rs.next()) {
				faqDetail = new String(rs.getString(1).getBytes("ISO-8859-1"),"GB2312");
				//out.println(faqDetail);
					}
				} catch(SQLException e){
     		System.out.println(e.toString());
     	} finally {
					DBConn.closeAll();
				}
			}
			if (faqDetail != null) {

				out.println(faqDetail);
			} else {
				out.println("无法读取FAQ详细信息");
			}
		%>
	</body>
</html>

 

 

function.js(AJAX程序所需的JS代码)

var xmlHttp;
var currFaqld;
function createXMLHttp(){
	if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();		
	}else{
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");		
	}
}

function loadFAQ(faqld){
	currFaqld=faqld;	
	var currFaqDetail=getFaqDetailDiv(faqld);		
		if(currFaqDetail.innerHTML===""){		
			createXMLHttp();			
			xmlHttp.onreadystatechange=loadFAQCallback;						
			xmlHttp.open("GET","read_faq.jsp?faqld="+faqld,true);			
			xmlHttp.send(null);			
		}		
}

function loadFAQCallback(){
	if(xmlHttp.readyState==4){	
		getFaqDetailDiv(currFaqld).innerHTML=xmlHttp.responseText;	
	}
}

function getFaqDetailDiv(faqld){	
	return document.getElementById("faqDetail"+faqld);	
}

 

base.css(页面控制的CSS文件)

html,body{ margin: 0px; padding: 0px; text-align: center; font-size: 12px; }

* div{ margin-left: auto; margin-right: auto; background-color: White; }

.question{ width: 790px; height: 30px; line-height: 30px; text-align: left; border: 1px dotted Green; margin-top: 5px; }

.answer{ width: 790px; height: 30px; line-height: 30px; text-align: left; border: 1px dotted Red; margin-top: 5px; color: Gray; }

* a{ text-decoration: none; color: Blue; }

* p{ height: 30px; line-height: 30px; margin: 0px; padding: 0px; border: 0px; }

 
返回顶楼
   
 
论坛首页 → 入门讨论版 → AJAX

跳转论坛:
JavaEye推荐