ajax异步读取数据进行显示

通过ajax进行异步请求，读取数据进行显示，避免

<!-- 首页导航 -->
    <div class="navitem"><!--
        <ul class="nav"></ul>-->
        <div class="navitem">
            <ul class="nav">
            </ul>
        </div>
    </div>
    <script>
        $(function (){
            $.get("/frontdesk/category/all",function (categories) {
                var str = "<li class=\"nav-active\"><a href=\"index.html\">首页</a></li>";
                for (var i = 0 ; i <categories.length; i++){
                    str += "<li><a href=\"/frontdesk/product/routeList?cid="+categories[i].cid+"\">"+categories[i].cname+"</a></li>"
                }
                $(".nav").html(str);
            })
        })
    </script>

控制器方法：
上面的js中get请求的是下面控制器的all方法

@Controller
@RequestMapping("/frontdesk/category")
public class FrontdeskCategoryController {
    @Autowired
    private CategoryService categoryService;

    @RequestMapping("/all")
    @ResponseBody
    public List<Category> all(){
        return categoryService.findAll();
    }
}