Ajax+div-based "left menu, right content" page effect implementation _ajax related

Effect Demo:

① default page (index.jsp):

②: Click on the left User Management tab under the User list option, the right default page content update to the User List page (userlist.jsp) content:

③: Similarly, click on product Management, Order Management tab of the Product list, order list, the right content will be refreshed to the Product List page (productlist.jsp), the Order List page (recordlist.jsp) content

This is the use of ajax+div to achieve the left menu selection, the right content to display the effect of the following to see the specific implementation of the process bar

One:

The sample program for the entire demo contains the default page (index.jsp), the User List page (userlist.jsp), the Product List page (productlist.jsp), and the Order Management page (recordlist.jsp)

Using the Bootstrap frame and the fontawesome icon (no way, Bootstrap with the icon too little O (╯-╰) o), the use of these two goods to see the official website, are relatively simple

Let's take a look at the code of INDEX.JSP, I have a basic detailed comment:

<%@ 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" >  

Attention:

If the FONTAWESOMT icon is not displayed correctly, it is likely that the font file address in the FONT-AWESOME.CSS is wrong

Notice whether the URL in the right red box corresponds to the path of the Fonts-awesome file in the left red box

Two:

Userlist.jsp page Code:

<%@ 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" >
 
 

PRODUCTLIST.JSP:

<%@ 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" >
 
 

RECORDLIST.JSP:

<%@ 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" >
 
 

These three are just a simple demo page, there is no more ink.

Three: Source download

Http://files.cnblogs.com/files/Dreamer-1/AjaxExample.rar

The above is a small set to introduce the AJAX+DIV based on the "left menu, right content" page effect to achieve, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!