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页面里,都不需要我们后台拼装数据了,非常方便。
这个方法可以实现单独刷新一个div,好用的一点就是:如果将div里需要的信息单独放到一个jsp页面里,都不需要我们后台拼装数据了,非常方便。