jquery ajax 实现标签容器内的局部刷新



jsp页面ajax代码如下：

<span style="font-size:18px;"></span><pre class="javascript" name="code">$(document).ready(function(){
				
				$.ajax({
					url: '${pageContext.request.contextPath}/adminMenuAction!menuNav.action',
					type:'POST',
					//dataType: 'json',
					//调整超时时间会引起异常
					//timeout:3000,
					//请求成功时触发的事件
					success:function(data){
						$("#navList").html(data);
						
						/* for(var i=0;i<data.length;i++)
						{
							var name = data[i]["name"];
							var id =  data[i]["id"];
							var url = "${pageContext.request.contextPath}/"+data[i]["url"]+"?id="+id;
							var target = data[i]["target"];
							var listatt = date[i]["listatt"];
							for(var j=0;j<listatt.length;j++){
								
							}
							//向html中插入<li>
							$("#navlist").append("<li class=\"submenu\"> <a href=\"javascript:void(0)\" onClick=\"node_load('"+url+"')\"><i class=\"icon icon-th-list\"></i> <span>"+name+"</span> <span class=\"label label-important\">3</span></a>
							<ul>
								 <li><a href=\"form-common.html\">Basic Form</a></li>
							</ul>
							</li>");
						}  */
					},
					//请求失败时触发的事件
					error:function(xhr, errorInfo, ex){
						 var data = true;
						 if(data){
						 	
						 	date = false;
						 }
					},
					//请求完成后触发的事件，即在success和error触发后执行的事件
					complete:function(xhr,status){
						
					},
					//发送请求前触发的事件
					beforSend:function(xhr){},
					//是否异步发送
					async:true
				});
			});

<ul id="navList" class="nav nav-list">
					
					</ul><!-- /.nav-list -->

menuLeft.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<li class="active">
	<a href="index.jsp">
		<i class="icon-dashboard"></i>
		<span class="menu-text"> 控制台 </span>
	</a>
</li>
<c:forEach items="${navList}" var="nav">
<li>
	<a href="javascript:void(0)" class="dropdown-toggle">
		<i class="${nav.iconscl }"></i>
		<span class="menu-text">
			${nav.name}
			<span class="badge badge-primary ">${nav.childNum}</span>
		</span>
		<b class="arrow icon-angle-down"></b>
	</a>

	<ul class="submenu">
		<c:forEach items="${nav.listatt}" var="vo">
		<li>
			<a href="javascript:void(0)" οnclick="right_load('${vo.url}')">
				<i class="${vo.iconscl }"></i>
				${vo.name}
			</a>
		</li>
		</c:forEach>
	</ul>
</li>
</c:forEach> 

注意：后台需要针对div里的信息单独用一个jsp页面，不然就需要自己封装好需要的页面信息返回
这个方法可以实现单独刷新一个div，好用的一点就是：如果将div里需要的信息单独放到一个jsp页面里，都不需要我们后台拼装数据了，非常方便。