JS实现导航栏和侧边栏不变，指定DIV加载页面+页面加载时Ajax接收并解析Json数据并渲染数据返回到前端

直接上代码

前端jsp

// An highlighted block
<table class="table table-striped" id="tab">
                    <thead>
                    <tr>
                        <th>客户编号</th>
                        <th>客户姓名</th>
                        <th>联系方式</th>
                        <th>预估价值</th>
						<th>定义价值</th>
						<th>价值度</th>
						<th>当前类型</th>
						<th>备注</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 愿用EL表达式渲染数据，后改用Ajax异步刷新 -->
								<c:forEach var="Customer" items="${requestScope.Customer}"> 
								<form action="modifyCus" method="post">
									<tr>
										<td><input type="text" class="form-control" name="customerId" readonly = "readonly" value="${Customer.customerId}" /></td>
										<td><input type="text" class="form-control" name="customerName" value="${Customer.customerName}" /></td>
										<td><input type="text" class="form-control" name="contactWay" value="${Customer.contactWay}" /></td>
										<td><input type="text" class="form-control" name="estimatedValue" value="${Customer.estimatedValue}" /></td>
										<td><input type="text" class="form-control" name="confirmValue" value="${Customer.confirmValue}" /></td>										
										<td><input type="text" class="form-control" name="value" value="${Customer.value}" /></td>
										<td><input type="text" class="form-control" name="kind" value="${Customer.kind}" /></td>										
										<td><input type="text" class="form-control" name="remarks" value="${Customer.remarks}" /></td>																				
										<td><input type="submit" class="btn btn-info btn-sm" value="编辑并提交" /></td>
										<td><a class="btn btn-danger btn-sm" href="DeleteCus?customerId=${Customer.customerId}">删除</a></td>
									</tr>
								</form>
							</c:forEach>
						</tbody>
                </table>

JS代码（核心代码）

//Ajax 实现页面加载时的局部刷新

$(document).ready(function(){ 

    $.ajax({
    	//跳转对象，此处指向Controller层的方法
    	url: "findAllCustomer",
    	type: "post",
    	//返回类型，此处注意，填写json时不能正确解析，应转换为text
    	dataType : "text",
    		
    	success:function(JsonList){
    		var result = JsonList;
    		var con ='';
    		//遍历Json对象，此处注意，因为传过来的Json不是不同的Json，而是Json对象，Js需要的是JavaScript对象，此时要做类型转换
    		$.each(JSON.parse(result), function(i,item){
    			//拼接Html语句，遍历出的Json值可以在此处赋值到页面中
    		    con +='<tr><td><input type="text" class="form-control" name="customerId" readonly = "readonly" value="' + item.customerId+ ' ">'  
    			+ '</td><td><input type="text" class="form-control" name="customerName" value="' + item.customerName+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="contactWay" value="' + item.contactWay+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="estimatedValue" value="' + item.estimatedValue+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="confirmValue" value="' + item.confirmValue+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="value" value="' + item.value+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="kind" value="' + item.kind+ ' ">' 
    			+ '</td><td><input type="text" class="form-control" name="remarks" value="' + item.remarks+ ' ">' 
    			+ '</td><td><input type="submit" class="btn btn-info btn-sm" value="编辑并提交" /></td>' 
    			+ '<td><a class="btn btn-danger btn-sm" href="DeleteCus?customerId=' + item.customerId 
    			+ '">删除</a></td></tr>'
    			;    		    
    		});
    		  alert(con);
    		  //取得id=tab 的DOM表格对象，将Html语句拼接到该位置
    		  $('#tab').append(con);
    		 },
    		 error: function (XMLResponse) {
    			 //返回失败信息
                 alert(" 错误信息：" + XMLResponse.responseText);
             }
    
    	});
    
});

后台Controller代码（使用的是SpringMVC）

/*
	 * 查询全部客户（客户公海）
	 */
	@RequestMapping("/findAllCustomer")
	public void findAllCustomer(HttpServletResponse response){
		
		List<Customer> customersList = new ArrayList<Customer>();
		customersList.addAll(service.findAllCustomer());	
		//使用Fastjson把list转换成Json
		String JsonRes = JSON.toJSONString(customersList);
		System.out.println("进入时加载全部客户");
		System.out.println("list型数据:  "+customersList.get(0));
		System.out.println("Json型数据:  "+JsonRes);
		
		try {
			//返回Json到Ajax中
			response.getWriter().println(JsonRes);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

此次包含了前台实现局部跳转，即导航栏和侧边栏不变，指定DIV加载需要的页面

前端JSP代码

<li class="list li_dep">
              <a data-id="CustomerGH">&nbsp;公海</a>
              <a href="transAddDep">&nbsp;商机</a>
              <a href="transAddDep">&nbsp;客户</a>
            </li>

关键代码 data-id=“CustomerGH” 存储data-id的内容送到JS中，作为跳转的辨识条件。
ps：记得顶层ul中添加class 以便让Jq取到

<ul class="nav nav-sidebar userMenu">

JS内容（核心代码）

/*
 * 保持侧边栏和导航栏不动，实现局部刷新
 */
$(function() {
    $(".userMenu").on("click", "a", function() {
      //获取data-id的值
        var sId = $(this).data("id"); 
      //设置锚点
        window.location.hash = sId; 
        loadInner(sId);
    });

    function loadInner(sId) {
    	//记录当前锚点
        var sId = window.location.hash;
        var pathn , i;
        switch(sId) {
            case "#center":
                pathn = "GongHai.jsp";
                i = 0;
                break;
            case "#account":
                pathn = "TestTrans.jsp";
                i = 1;
                break;
            case "#trade":
                pathn = "TestTrans2.jsp";
                i = 2;
                break;
            case "#CustomerGH":
                pathn = "CustomerGH.jsp";
                i = 3;
                break;
            case "#T1":
                pathn = "T1.jsp";
                i = 4;
                break;
        }
      //选中区块加载相对应的内容
        $("#MContent").load(pathn); 
    }

});

关键注释都已经放进代码中，此内容以便自己以后复习翻阅，本人为前端新手，若有用词不当，请大佬轻喷！！！