jfinal实现前端页面异步加载

上次写了一个同步的加载方法,这次抽点时间写了个异步的方案。

前端主要代码如下:

<div id="img#(x)"></div>
<script>
    $(document).ready(function(){
    $.ajax({     
          url : "/image/getHotelImage/#(hotel.h_id)",
          type : "GET",   //规定请求的类型(GET 或 POST)
          cache : false,  //表示浏览器是否缓存被请求页面
          dataType : "html",  //预期的服务器响应的数据类型
          success : function(data){
            $("#img#(x)").html(data)
          }
     })
   });
</script>

后台controller的方法:

public void getHotelImage() {
    int id = getParaToInt();
    //搜索时用第一张图片替代
    System.out.println(id);
    HotelImageModel hotelImage = imageService.findAnHotelImage(id).get(0);
    setAttr("hotelImage",hotelImage);
    render("commonPart/hotelImage.html");
}

其实就是一个图片的异步加载。需要注意的是前端设置的返回值是HTML,后台就得用render方法;前端设置的是json,后台就得使用renderJson方法。

评论区

山东小木

2019-05-22 17:39

可以参考这个方案 原理差不多 做成模板指令更好用 点击查看: JFinal自定义模板指令AjaxPortal-实现页面区域异步加载与刷新

好好学习1111

2019-05-22 20:38

@山东小木 这个太6了,大佬