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() ...
随机推荐
- Google Map 符号
符号 简介 如果您想在标记上使用基于矢量的图标,或者向多段线添加图像,便可使用符号. 标记支持使用光栅图像以及矢量图像.请参阅有关定制标记图标的文档. Symbol 是一种可显示在 Marker ...
- 利用HttpWebRequest模拟表单提交 JQuery 的一个轻量级 Guid 字符串拓展插件. 轻量级Config文件AppSettings节点编辑帮助类
利用HttpWebRequest模拟表单提交 1 using System; 2 using System.Collections.Specialized; 3 using System.IO; ...
- DBA_实践指南系列2_Oracle Erp R12系统安装配置设定Setup（案例）
2013-12-02 Created By BaoXinjian
- wait/waitpid函数与僵尸进程、fork 2 times
一.僵尸进程 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) 子进程退出时,内核将子进程置为僵尸状态,这个进程称为僵尸进程, ...
- 共享内存简介和mmap 函数
一.共享内存简介 共享内存区是最快的IPC形式,这些进程间数据传递不再涉及到内核,换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据. 即每个进程地址空间都有一个共享存储器的映射区,当这块区 ...
- MyEclipse中常用的快捷键大全
http://www.cnblogs.com/wl0000-03/p/5953989.htmlMyEclipse中常用的快捷键大全 复制当前行到下(上)一行中:ctrl+alt+上下键 自动补全alt ...
- mark 百度Echarts统计图表
mark http://git.oschina.net/seeyoui/kensite_cms/blob/master/src/main/java/com/seeyoui/kensite/framew ...
- SpringMVC中异常处理详解
Spring MVC处理异常最基本的就是HandlerExceptionResolver这个接口,先看张图 分析上图可以轻松总结出,spring mvc里有三种异常处理方法: 1.使用官方提供的简单异 ...
- JavaScript：零星知识
1. 关于document.write() 如果在文档已完成加载后执行 document.write,整个HTML 页面将被覆盖. 2. 对代码行进行折行 您可以在文本字符串中使用反斜杠对代码行进行换 ...
- 使用PL/Scope分析PL/SQL代码
使用PL/Scope分析你的PL/SQL代码 从11g開始Oracle引入了PL/Scope 用于编译器收集PL/SQL程序单元的全部标识符(变量名.常量名.程序名等). 收集到的信息可通过一系列静态 ...