Ajax-ajax实例1-动态加载的 FAQ
2021-06-16 01:05
YPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
标签:运行 ams jdbc get highlight string 调用 jdb als
动态加载 FAQ 的过程主要是利用 XMLHttpRequest(以下简称 XHR)对象与服务端通信,根据用户单击的感兴趣问题动态将内容加载到页面中。在具体实现时,有两点要注意的内容。
1 .对每个问题进行唯一标识
FAQ 主要包含问题与解答两个部分,用户单击一个问题时,服务器必须知道请求的是哪个问题的
解答,所以必须对每个问题进行唯一标识。标识的方法很多,在本例中简单使用数字进行标识。每个
问题在页面上表现为超链接,单击链接将触发 onclick 事件,调用 loadFAQ 函数,传入问题标识,获取
对应的解答。
单击后并不是要真正链接到一个新的页面,所以在标签的 onclick 事件中 return false 取消原有
链接的功能。每个答案分配一个 div 用于显示,每个 div 的 id 属性命名规则为,在对应的问题数字标
识前统一增加“faqDetail”。
2 .对已加载的解答不重复向服务器发出请求
问题的解答加载后,将显示在对应问题下方的 div 中。当用户再次单击问题时该 div 将隐藏起来。
如果用户第三次单击相同的问题,由于解答已加载到页面,所以不需要再次向服务器发送请求,只需
将隐藏的 div 显示出来即可。
隐藏和显示主要通过设置 div 样式中的 display 属性来完成,当 display 属性设置为“none”时隐藏,
设置为“block”时显示。判断是否需要发出请求,可以检查 div 的 innerHTML 是否包含内容。
项目结构:
项目运行:
AjaxRequest.js:Ajax封装类: http://www.cnblogs.com/hfultrastrong/p/7267171.html
showfaq.jsp:用于显示faq问题:
Insert title here );return false;">" style="display: none;">
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
标签:运行 ams jdbc get highlight string 调用 jdb als
原文地址:http://www.cnblogs.com/hfultrastrong/p/7273131.html
文章标题:Ajax-ajax实例1-动态加载的 FAQ
文章链接:http://soscw.com/index.php/essay/94370.html