Ajax-ajax实例1-动态加载的 FAQ

动态加载 FAQ 的过程主要是利用 XMLHttpRequest（以下简称 XHR）对象与服务端通信，根据用户单击的感兴趣问题动态将内容加载到页面中。在具体实现时，有两点要注意的内容。

1 ．对每个问题进行唯一标识
FAQ 主要包含问题与解答两个部分，用户单击一个问题时，服务器必须知道请求的是哪个问题的
解答，所以必须对每个问题进行唯一标识。标识的方法很多，在本例中简单使用数字进行标识。每个
问题在页面上表现为超链接，单击链接将触发 onclick 事件，调用 loadFAQ 函数，传入问题标识，获取
对应的解答。
单击后并不是要真正链接到一个新的页面，所以在<a>标签的 onclick 事件中 return false 取消原有
链接的功能。每个答案分配一个 div 用于显示，每个 div 的 id 属性命名规则为，在对应的问题数字标
识前统一增加“faqDetail”。
2 ．对已加载的解答不重复向服务器发出请求
问题的解答加载后，将显示在对应问题下方的 div 中。当用户再次单击问题时该 div 将隐藏起来。
如果用户第三次单击相同的问题，由于解答已加载到页面，所以不需要再次向服务器发送请求，只需
将隐藏的 div 显示出来即可。
隐藏和显示主要通过设置 div 样式中的 display 属性来完成，当 display 属性设置为“none”时隐藏，
设置为“block”时显示。判断是否需要发出请求，可以检查 div 的 innerHTML 是否包含内容。

项目结构：

项目运行：

数据库：

/*

SQLyog Ultimate v12.09 (64 bit)

MySQL - 5.5.53 : Database - ajaxexample_1

*********************************************************************

*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;

/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;

/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

CREATE DATABASE /*!32312 IF NOT EXISTS*/`ajaxexample_1` /*!40100 DEFAULT CHARACTER SET utf8 */;

USE `ajaxexample_1`;

/*Table structure for table `faqdetail` */

DROP TABLE IF EXISTS `faqdetail`;

CREATE TABLE `faqdetail` (

  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',

  `answer` varchar(200) NOT NULL COMMENT '问题',

  `question` varchar(800) NOT NULL COMMENT '答案',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

/*Data for the table `faqdetail` */

insert  into `faqdetail`(`id`,`answer`,`question`) values (1,'问题1','答案1答案1答案1答案1答案1答案1'),(2,'问题2','答案2答案2答案2答案2答案2答案2');

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;

/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;

/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;

/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

AjaxRequest.js：Ajax封装类： http://www.cnblogs.com/hfultrastrong/p/7267171.html

showfaq.jsp：用于显示faq问题：

<%@page import="java.sql.ResultSet"%>

<%@page import="java.sql.PreparedStatement"%>

<%@page import="java.sql.Connection"%>

<%@page import="com.gordon.util.DBUtil"%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!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=UTF-8">

<title>Insert title here</title>

</head>

<body>

	<%

		Connection conn = DBUtil.getConnection();

		String sql = "SELECT * FROM faqdetail;";

		PreparedStatement pst = conn.prepareStatement(sql);

		ResultSet rs = pst.executeQuery(sql);

		while (rs.next()) {

	%>

	<a href="javascript:;" onclick="getFaqDetail(<%=rs.getString("id")%>);return false;"><%=rs.getString("answer")%></a>

	<br>

	<div id="faqdetail<%=rs.getString("id")%>" style="display: none;"></div>

	<br />

	<hr />

	<%

		}

		rs.close();

		pst.close();

		conn.close();

	%>

</body>

<script type="text/javascript" src="js/AjaxRequest.js"></script>

<script type="text/javascript">

		// 创建XMLHttpRequest随想

		var xhr = Ajax();

		// 根据问题id获取详细内容

		function getFaqDetail(answerid) {

			var shownode = document.getElementById("faqdetail" + answerid);

			if(shownode.style.display == "none") {

				shownode.style.display = "block";

				if(shownode.innerHTML == "") {

					var url = "GetFaqDetailServlet";

					var params = "answerid=" + answerid;

					var des_url = url + "?nocache=" + new Date().getTime() + "&" + params;

					xhr.get(des_url, function(data){

						handleResult(data, shownode);

					});

				}

			} else {

				shownode.style.display = "none";

			}

		}

		// 处理返回结果

		function handleResult(data, shownode) {

			shownode.innerHTML = data;

		}

	</script>

</html>

GetFaqDetailServlet.java:用于逻辑处理：

package com.gordon.servlet;

import java.io.IOException;

import javax.servlet.Servlet;

import javax.servlet.ServletConfig;

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 com.gordon.service.GetAnswerDetailService;

/**

 * 获取FAQ问题详情

 */

@WebServlet(urlPatterns = { "/GetFaqDetailServlet" })

public class GetFaqDetailServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/**

	 * @see HttpServlet#HttpServlet()

	 */

	public GetFaqDetailServlet() {

		super();

		// TODO Auto-generated constructor stub

	}

	/**

	 * @see Servlet#init(ServletConfig)

	 */

	public void init(ServletConfig config) throws ServletException {

		// TODO Auto-generated method stub

	}

	/**

	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	protected void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		String question = ""; 

		request.setCharacterEncoding("UTF-8");

		response.setContentType("text/text;charset=utf-8;");

		String answerid = request.getParameter("answerid");

		try {

			question = GetAnswerDetailService.getAnswerDetailById(answerid);

		} catch (Exception e) {

			System.out.println(e.getMessage());

		}

		response.getWriter().print(question);

	}

	/**

	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

	 *      response)

	 */

	protected void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		// TODO Auto-generated method stub

		doGet(request, response);

	}

}

GetAnswerDetailService.java：用于根据id获取答案的详细代码结构：

package com.gordon.service;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import com.gordon.util.DBUtil;

public class GetAnswerDetailService {

	/**

	 * 根据问题id获取解答信息

	 * @param answerid

	 * @return

	 * @throws ClassNotFoundException

	 * @throws SQLException

	 */

	public static String getAnswerDetailById(String answerid) throws ClassNotFoundException, SQLException {

		String result = "";

		Connection conn = DBUtil.getConnection();

		String sql = "SELECT question FROM faqdetail WHERE id = ?";

		PreparedStatement pst = conn.prepareStatement(sql);

		pst.setInt(1, Integer.valueOf(answerid));

		ResultSet rs = pst.executeQuery();

		while (rs.next()) {

			result = rs.getString("question");

		}

		rs.close();

		pst.close();

		conn.close();

		return result;

	}

}

DBUtil.java用于获取数据库连接：

package com.gordon.util;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.SQLException;

public class DBUtil {

	private static final String URL = "jdbc:mysql://localhost:3306/ajaxexample_1";

	private static final String DRIVER = "com.mysql.jdbc.Driver";

	private static final String USERNAME = "root";

	private static final String PASSWORD = "root";

	public static Connection getConnection() throws ClassNotFoundException, SQLException {

		Class.forName(DRIVER);

		return DriverManager.getConnection(URL, USERNAME, PASSWORD);

	}

}

+++++++++++++++++++++++++++

参考：ajax实用案例大全-1动态加载数据 https://wenku.baidu.com/view/c7897bf4700abb68a982fb91.html

Ajax-ajax实例1-动态加载的 FAQ的更多相关文章

php+ajax实现无刷新动态加载数据技术
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...
Ajax与DOM实现动态加载
阅读目录 DOM如何动态添加节点 Ajax异步请求 Chrome处理本地Ajax异步请求参考: 首先说下问题背景:想要通过异步请求一个文本文件,然后通过该文件的内容动态创建一个DOM节点添加到网页中 ...
Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
AJAX 动态加载后台数据绑定select
<select id="select">  </select> js:(使用jquery) $(document ...
AJAX动态加载评论
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Ajax动态加载数据
前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...
爬虫——爬取Ajax动态加载网页
常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...
移动端，ajax 动态加载的元素，为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

随机推荐

【php】基础学习3
本节主要是php中函数的学习: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Con ...
Android 中日期对话框的应用
import java.util.Calendar; import android.widget.DatePicker; import android.app.DatePickerDialog; // ...
Unityclient框架笔记二（组件实体开发模式的思考）
Unity的Entity-Component-System实现的很美丽,很灵活.许多文章也对这样的组件实体的开发模式倍加推崇.由于它契合这么一条规则:优先使用组合而不是继承. 可是实际开发过程中,限制 ...
ubuntu16安装squid代理服务器
如果有一台电脑可以上网,想让其他电脑通过代理上网.可以使用这种方法. 1 安装squid sudo apt-get update sudo apt-get install squid 2 修改配置文件 ...
javascript常用字符串函数和本地存储
concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a.conca ...
如何发布Node模块到NPM社区
“学骑自行车最快的方式就是先骑上去” 一.安装node和npm 1.一种是通过编译node源文件安装node(注意:需要Python 2.6或2.7已经安装) $ wget http://nodejs ...
如何设置Docker容器中Java应用的内存限制
如果使用官方的Java镜像,或者基于Java镜像构建的Docker镜像,都可以通过传递 JAVA_OPTS 环境变量来轻松地设置JVM的内存参数.比如,对于官方Tomcat 镜像,我们可以执行下面命令 ...
自己动手写shell命令之write
Linux下write命令同意用户跟其它终端上的用户对话.用c语言实现shell命令write.代码例如以下: #include <stdio.h> #include <fcntl. ...
QT4编程过程中遇到的问题及解决办法
1.QLineEdit显示内容的格式函数: QLineEdit *lineEditPassword = new QLineEdit: lineEditPassword -> setEchoMod ...
Hibernate 的一级缓存和二级缓存总结
缓存:缓存是什么,解决什么问题? 位于速度相差较大的两种硬件/软件之间的,用于协调两者数据传输速度差异的结构,均可称之为缓存Cache.缓存目的:让数据更接近于应用程序,协调速度不匹配,使访问速度更快 ...

Ajax-ajax实例1-动态加载的 FAQ

Ajax-ajax实例1-动态加载的 FAQ的更多相关文章

随机推荐

热门专题