Ajax异步加载，实现真正意义上，公共页面的包含

137 阅读 0 评论 91 点赞

我是靠谱客的博主甜美板栗，最近开发中收集的这篇文章主要介绍Ajax异步加载，实现真正意义上，公共页面的包含，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求

公共页面：head.jsp、foot.jsp
主体页面有很多：index.jsp、user.jsp、product.jsp等等
需求：在head.jsp中加载分类导航条信息，让所有包含head.jsp的主体页面都可以加载分类导航条信息

<ul
id="myul"></ul>

head.jsp中代码

<script>
$(function(){
//向服务端发起ajax请求，服务端经过处理，将所有分类信息以JSON格式的数据返回
var url = "路径";
var obj = {"method":"方法名"};
$.post(url,obj,function(data){
//alert(data);
//获取到服务端响应回的数据，经过观察data中存放的一个JSON格式数组，遍历数组
$.each(data,function(i,obj){
var li = "<li><a href='#'>"+obj.cname+"</a></li>";
$("#myul").append(li);
});
},"json");
})
</script>

思路

上述代码中，url是我们要请求的路径，下面method是我们请求的方法名，后面就是通过servlet、service以及dao进行分类信息的查询的实现。

这样带来最大的好处就是：我们只需要实现公共页面头部的分类信息展示，其他包含公共页面的页面，都可以实现头部的分类信息展示。

其中json数据返回的代码

public String findAllCategory(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
CategoryService categoryService = new CategoryServiceImpl();
try {
//调用业务层获取全部分类
List<Category> list = categoryService.findAllCategory();
//将全部分类转换为JSON格式的数据
String jsonStr = JSONArray.fromObject(list).toString();
//System.out.println(jsonStr);
response.setContentType("application/json;charset=utf-8");
//将全部分类信息响应到客户端
response.getWriter().print(jsonStr);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}