Ajax-ajax Instance 1-Dynamically loaded FAQ

the process of dynamically loading FAQ is mainly using XMLHttpRequest (hereinafter referred to as XHR) object to communicate with the server, according to the user clicks the topic of interest dynamically loads the content into the page. In the concrete implementation, there are two points to pay attention to the content.

1. Uniquely identify each issue
FAQ contains questions and answers two sections, when the user clicks on a problem, the server must know which problem is requested
Solution, each issue must be uniquely identified. There are many ways to identify, and in this case simply use numbers to identify them. Each
The problem appears as a hyperlink on the page, click the link to trigger the onclick event, call the Loadfaq function, pass in the problem ID, get
The corresponding solution.
After clicking not to really link to a new page, return false in the <a> tag's onclick event to cancel the original
The functionality of the link. Each answer is assigned a div for display, and the id attribute of each div is named for, in the corresponding question, the digital label
To increase the "faqdetail" by unification before knowledge.
2. Do not repeat requests to the server for loaded answers
The answer to the question is loaded and appears in the div below the corresponding question. The div will be hidden when the user clicks the problem again.
If the user clicks the same question for the third time, because the answer has been loaded into the page, there is no need to send the request to the server again, just
The hidden Div is displayed.
Hide and show is done primarily by setting the Display property in the div style, when the display property is set to "none" and hidden,
Displayed when set to "block". To determine if a request needs to be made, you can check whether the div's InnerHTML contains content.

Project structure:

Project run:

AjaxRequest.js:Ajax Package class: Http://www.cnblogs.com/hfultrastrong/p/7267171.html

SHOWFAQ.JSP: Used to display FAQ questions:

<% @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" >
Getfaqdetailservlet.java: for logical processing:
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;/** * Get details of FAQs */@ 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 Servle texception {//TODO auto-generated method stub}/** * @see httpservlet#doget (httpservletrequest request, HttpServletResponse * response) */protected void doget (HttpServletRequest request, httpservletresponse response) throw S 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 (HTT Pservletrequest request, HttpServletResponse response) throws Servletexception, IOException {//TODO auto-generated Method Stubdoget (Request, Response);}}
Getanswerdetailservice.java: A detailed code structure for getting answers based on IDs:
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 {/** * Get answer information based on problem ID * @ Param Answerid * @return * @throws classnotfoundexception * @throws SQLException */public static String getanswerdetailbyi D (String answerid) throws ClassNotFoundException, SQLException {string result = ""; Connection conn = Dbutil.getconnection (); String sql = "Select question from faqdetail WHERE id =?"; PreparedStatement PST = conn.preparestatement (SQL);p st.setint (1, integer.valueof (Answerid)); ResultSet rs = Pst.executequery (); while (Rs.next ()) {result = Rs.getstring ("question");} Rs.close ();p st.close (); Conn.close (); return result;}}
Dbutil.java used to get a database connection:
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";p rivate static final St  Ring DRIVER = "Com.mysql.jdbc.Driver";p rivate static final String USERNAME = "root";p rivate static final String PASSWORD = "Root";p ublic static Connection getconnection () throws ClassNotFoundException, SQLException {class.forname (DRIVER); Return Drivermanager.getconnection (URL, USERNAME, PASSWORD);}}
+++++++++++++++++++++++++++
Reference: Ajax Utility Case Daquan-1 dynamic load Data https://wenku.baidu.com/view/c7897bf4700abb68a982fb91.html
Ajax-ajax Instance 1-Dynamically loaded FAQ