Spring MVC Ajax请求加载更多

最新推荐文章于 2021-06-05 16:41:54 发布
最新推荐文章于 2021-06-05 16:41:54 发布
阅读量1k 收藏
点赞数
分类专栏： JAVA Spring MVC 文章标签： spring ajax spring mvc web开发 freemarker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yueaini10000/article/details/51505027
版权

配置****-dispatcher-servlet.xml


<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
    <!--
    <bean id="mappingJacksonHttpMessageConverter"
        class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/html;charset=UTF-8</value>
            </list>
        </property>
    </bean>  
     -->
    <!-- freemarker模板 -->
     <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">  
        <property name="templateLoaderPath" value="WEB-INF/ftl/" />  
        <property name="defaultEncoding" value="UTF-8" />  
     </bean>  
     <!-- freemarker视图解析器 -->  
     <bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">  
        <property name="suffix" value=".ftl" />  
        <property name="contentType" value="text/html;charset=UTF-8" />  
        <!-- 此变量值为pageContext.request, 页面使用方法：rc.contextPath -->  
        <property name="requestContextAttribute" value="rc" />  
     </bean> 


Ajax请求返回的数据Model

public class ResponseData {
    public static final int SUCCESS = 200;
    public static final int DEFAULT_ERROR = 500;
    
    public static ResponseData newSuccess(String message) {
        ResponseData rd = new ResponseData(true, null);
        rd.setStatus(SUCCESS);
        rd.setMessage(message);
        
        return rd;
    }
    
    
    public static ResponseData newSuccess(Object data) {
        return ResponseData.newSuccess("", data);
    }
    
    public static ResponseData newSuccess(String message, Object data) {
        ResponseData rd = new ResponseData(true, data);
        rd.setStatus(SUCCESS);
        rd.setMessage(message);
        
        return rd;
    }
    
    public static ResponseData newFailed(String message) {
        ResponseData rd = new ResponseData(false, null);
        rd.message = message;
        rd.setStatus(DEFAULT_ERROR);
        return rd;
    }
    
    public static ResponseData newFailed(Object data) {
        return ResponseData.newFailed("", data);
    }
    
    public static ResponseData newFailed(String message, Object data) {
        ResponseData rd = new ResponseData(false, data);
        rd.message = message;
        rd.setStatus(DEFAULT_ERROR);
        return rd;
    }
    
    private boolean success;
    private Object data;
    private String message;
    private int status;
    
    private List<String> errors;
    private Map<String, String> fieldErrors;
    
    public ResponseData(boolean success, Object data) {
        this.success = success;
        this.data = data;
    }
    
    public boolean isSuccess() {
        return success;
    }
    public void setSuccess(boolean success) {
        this.success = success;
    }
    public Object getData() {
        return data;
    }
    public void setData(Object data) {
        this.data = data;
    }
    public List<String> getErrors() {
        return errors;
    }
    public void setErrors(List<String> errors) {
        this.errors = errors;
    }
    public Map<String, String> getFieldErrors() {
        return fieldErrors;
    }
    public void setFieldErrors(Map<String, String> fieldErrors) {
        this.fieldErrors = fieldErrors;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }    
}

分页公共类

public class Pagination<T> {
    private int currentPage;

    private long total;
    private List<T> rows;
    private int totalPages;
    
    public Pagination() {
        this.total = 0;
        this.totalPages = 0;
        this.rows = Collections.emptyList();
    }
    
    public Pagination(Page<T> page) {
        this.total = page.getTotalElements();
        this.rows = page.getContent();
        this.totalPages = page.getTotalPages();
        this.currentPage = page.getNumber();
    }
    
    public long getTotal() {
        return total;
    }

    public void setTotal(long total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    /**
     * @return the totalPage
     */
    public int getTotalPages() {
        return totalPages;
    }

    /**
     * @param totalPage the totalPage to set
     */
    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;
    }    
}


Controller

/**
 *
 * @author Bruce
 *   
 */
@Controller
public class MyUserAwardController extends AbstractController{
    
    @Autowired
    private MyUserAwardService myUserAwardService;
 

   //首次访问加载

    @RequestMapping(value = "/8888/9999.do")
    public String index(HttpServletRequest request,HttpServletResponse response,
            @RequestParam(value = "page",defaultValue="0") int page,
            @RequestParam(value = "pageSize",defaultValue="30") int rows,Model model){
        Restriction<UserAwardPO> restriction = new Restriction<UserAwardPO>(createPageRequest(page, rows, new Sort(Direction.DESC, "id")));
        
        Pagination<UserAwardPO> results = myUserAwardService.pagingMyUserAward(restriction);

        model.addAttribute("pagination", results);
        
        return "/user/my_user_award_list";
    }
    //JQuery Ajax请求加载  返回ResponseDataModel 需要加入@ResponseBody注解
    @RequestMapping(value = "/8888/9999Ajax.do")
    public @ResponseBody ResponseData malcByUserAjax(@RequestParam(value = "page",defaultValue="0") int page,
            @RequestParam(value = "pageSize",defaultValue="30") int rows,Model model){
        Restriction<UserAwardPO> restriction = new Restriction<UserAwardPO>(createPageRequest(page, rows, new Sort(Direction.DESC, "id")));
        
        Pagination<UserAwardPO> results = myUserAwardService.pagingMyUserAward(restriction);

        model.addAttribute("pagination", results);

        ResponseData responseData = ResponseData.newSuccess("操作成功.", results);
        
        return responseData;
    }

}

公共页面

_default_layout.ftl

<#setting number_format="0.######">
<#macro defaultHeader>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="renderer" content="webkit">
    <title>*****${(title??)?string('-' + title!"", '')}</title>
    <meta name="description" content="${(description??)?string(description!"", '')}">    
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/amazeui.min.css?v=ingyazov">
    <script src="${rc.contextPath}/assets/js/jquery.min.js?v=ingyazov"></script>
    <script src="${rc.contextPath}/assets/js/handlebars.min.js?v=ingyazov"></script>
    <script src="${rc.contextPath}/assets/js/amazeui.min.js?v=ingyazov"></script>
    <#list styles as style>
    <link rel="stylesheet" href="${style}">
    </#list>
    <#list javascripts as js>
    <script type="text/javascript" src="${js}"></script>
    </#list>
    <style>
    html,body {-webkit-user-select:none; user-select: none; }
    </style>
</#macro>

<#macro layout header=defaultHeader>
<!DOCTYPE html>
<html class="no-js m">
<head>
<@header />
</head>
<body>
<#nested>
</body>
</html>
</#macro>


my_user_award_list.ftl 页面

<#include "../layout/_default_layout.ftl">
<#assign title="****">
<#assign description="****">
<#assign styles=["${rc.contextPath}/assets/css/client-app.css","${rc.contextPath}/assets/css/sweet-alert.css"]>
<#assign javascripts=["${rc.contextPath}/assets/js/sweet-alert.min.js"]>
<@layout>
<style type="text/css">
.list-award ul {
    display: table;
    width: 100%;
    border-collapse:collapse;
    border-spacing:0px;
}

.list-award li {
    display: table-row;
    width:100%;
    border-bottom: solid 10px #f6f6f6 !important;
    background-color: #FFF;
}

.list-award .cell {
    display: table-cell;
    height: 100%;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.cell-logo {
    width:120px;
    height:120px;
}

.cell-logo img {
    width:100px;height:100px;
}

.cell-award {
    position:relative;
}

.cell-score {
    width: 120px;
    position:relative;
    padding-top:20px !important;
    text-align: center;
}

.award-num {
    position:absolute;bottom:10px;right:10px;
}

.score {
    text-align:center;
    font-size: 18px;
    color: red;
}

.list-award .logo {
    margin-top: 10px;
}

.btn-status-un {
    font-size:14px;height:30px;width:100px;
}
</style>

     <div class="tc-list-widget list-award" style="margin-top:10px;">
            <ul id="datalist">
                <#list pagination.rows as i>
                    <li class="tc-list-item" >
                        <div class="cell cell-logo">
                            <div class="logo">
                                <img src="${i.award.picUrl!""}" alt="${i.award.name!""}">
                            </div>
                        </div>
                        <div class="cell cell-award">
                            <div style="margin-top:10px;">
                                <span>${i.award.name!""}</span>
                            </div>
                            <div><span class="tc-memo tips">有效期:${i.enabledAt!""}</span></div>
                            <div>
                                <span class="tc-memo tips">
                                    ${i.award.memo!""}
                                </span>
                            </div>
                        </div>
                        <div class="cell cell-score">
                            <div class="score">${i.award.score!""}</div>
                            <div class="tc-memo award-num">
                                <button class="btn-red btn-status-un" data-id="${i.id!""}">
                                    <#if i.status=1>已领取
                                    <#else>未领取
                                    </#if>
                                </button>
                            </div>
                        </div>    
                    </li>
                </#list>                        
            </ul>
            <div class="tc-list-footer" style="cursor:pointer;" id="loadmore" data-page="1" data-size="30">
                点击加载更多...
            </div>
        </div>
    </div>
    
    
<script type="text/javascript">

var validId = '${validId!""}';

    (function($){
    
        function bindClick() {
            $("#datalist button").unbind().bind("click", function() {
                var userAwardId = $(this).attr("data-id");
                if(userAwardId == "" || userAwardId == null){
                    swal({title:"请求错误，请稍候再试!", type: "warning"});
                }else{
                    window.location.href = 'malcUserDetails.do?userAwardId=' + userAwardId;
                }
            });
        }
        
        $("#loadmore").on("click", function() {
            
            $.ajax({
                url:'9999Ajax.do',
                type:'post',
                data:{
                    page:$("#loadmore").attr("data-page"),
                    rows:$("#loadmore").attr("data-size")
                    },
                datatype:'json',
                success:function(responseData){
                
                       var currentPage = responseData.data.currentPage;
                       var totalPages  = responseData.data.totalPages;
                       
                       if(currentPage <= totalPages) {

                           currentPage++;
                           $("#loadmore").attr("data-page", currentPage);

                       }
                       
                       if(responseData.data.rows.length <= 0){
                           $("#loadmore").html("暂无更多数据!");
                       }else{
                           var arrText = [];
                            for(i = 0; i < responseData.data.rows.length; i++){
                               var dataObj = responseData.data.rows[i];
                               
                            arrText.push('<li class="tc-list-item" >');
                                arrText.push('<div class="cell cell-logo">');
                                    arrText.push('<div class="logo">');
                                        arrText.push('<img src="'+dataObj.award.picUrl+'" alt="'+dataObj.award.name+'">');
                                    arrText.push('</div>');
                                arrText.push('</div>');
                                arrText.push('<div class="cell cell-award">');
                                    arrText.push('<div style="margin-top:10px;">');
                                        arrText.push('<span>'+dataObj.award.name+'</span>');
                                    arrText.push('</div>');
                                    arrText.push('<div><span class="tc-memo tips">有效期:'+dataObj.enabledAt+'</span></div>');
                                    arrText.push('<div>');
                                        arrText.push('<span class="tc-memo tips">');
                                            arrText.push(' '+dataObj.award.memo+' ');
                                        arrText.push('</span>');
                                    arrText.push('</div>');
                                arrText.push('</div>');
                                arrText.push('<div class="cell cell-score">');
                                    arrText.push('<div class="score">'+dataObj.award.score+'</div>');
                                    arrText.push('<div class="tc-memo award-num">');
                                        arrText.push('<button class="btn-red btn-status-un" data-id="'+dataObj.id+'">');
                                            if(dataObj.status == 1){
                                                arrText.push('已领取');
                                            }else{
                                                arrText.push('未领取');
                                            }
                                        arrText.push('</button>');
                                    arrText.push('</div>');
                                arrText.push('</div>');
                            arrText.push('</li>');
                            
                           }
                           $("#datalist").append(arrText.join(''));
                           bindClick();
                       }
                       
                },
                headers: {validId:validId},
                error: function(){
                    swal({title:"加载错误，请稍候再试!", type: "warning"});
                }
            });
        });
        
        bindClick();
    })(jQuery);

</script>
</@layout>


菠萝y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringMVC+Jquery -页面异步加载数据
六月心悸
08-14 2688
背景： 做项目时涉及到页面，当我打算在controller中传一个list到页面，然后通过循环遍历出来时，同事说：你这样每次都要刷新，这都是几百年前使用的技术了。你用post实现异步加载数据。然后就...... ResultUtil.java 工具类： package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; im
Spring MVC 中 AJAX请求并返回JSON的示例
10-20
本篇文章主要介绍了Spring MVC 中 AJAX请求并返回JSON，具有一定的参考价值，有兴趣的可以了解一下。
load_More(点击加载更多)
08-24
点击加载跟多
MVC中实现加载更多
weixin_33720452的博客
12-04 71
需要实现的功能： 数据太多想初次加载部分数据，在底部加上“加载更多”按钮 点击后加载第二页数据（从数据库只取指定页数据）后接在已有数据后面（类似于android中的下拉加载更多） 每次加载时显示“正在加载……” 网上找了一些方法，类似于MvcPager分页组件，用的是v1.5.0版，但后台需要将分页后的对象列表ToPagedList，需要在MvcPager源码中加入public s...
Ajax + SpringMVC页面加载时从后台请求数据
u012958250的博客
05-19 2752
请求url直接使用springMVC请求路径： &lt;script th:inline="javascript"&gt;  $(document).ready(function(){          $.ajax({               type:"GET",               url:"news/getKeyWords",                  s...
SpringView的使用详解。 下拉 上拉 刷新加载更多的第三方开源库
甄宗伟的博客
12-22 2359
SpringView有哪些长处？ 能对header/footer（头部/尾部）的样式和动画进行高度自己定义，单独将header/footer独立出来。 差点儿能够实现不论什么你想要的效果，仅仅须要继承BaseHeader/BaseFooter实现相应接口就能够。能动态地替换header/footer。仅仅须要设置不同的头尾就可以：springView.setHeader(MyHeader());
Spring mvc AJAX技术实现原理解析
08-19
主要介绍了Spring mvc AJAX技术实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
从源码角度看spring mvc的请求处理过程
08-25
主要介绍了从源码角度看spring mvc的请求处理过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
Spring MVC中处理ajax请求的跨域问题与注意事项详解
08-28
跨域问题是我们大家在开发中会经常遇到的一个问题，所以下面这篇文章主要给大家介绍了关于Spring MVC中处理ajax请求的跨域问题与注意事项的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面...
Spring MVC+ajax进行信息验证的方法
10-16
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。这篇文章主要介绍了Spring MVC+ajax进行信息验证,需要的朋友可以参考下
jquery在浏览器滚动条上的应用
薄荷的Weblog
10-21 1456
Google阅读器上有一个AJAX效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于我来说再好不过了，因为我很不喜欢翻页，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其
首页数据展示前端页面
qq_46112274的博客
06-05 1601
首页数据展示前端页面1、首页前端实现1.1、封装api请求，用户调用后端接口1.1.1、创建api文件夹，创建/api/hosp/hosp.js1.1.2、创建/api/cmn/dict.js用于调取数据字典中的值1.2、添加组件，用于页面显示1.3、在index.vue页面中编写js代码，用于实现数据在页面的显示 1、首页前端实现 1.1、封装api请求，用户调用后端接口 1.1.1、创建api文件夹，创建/api/hosp/hosp.js import request from '@/utils/re
ajax实现点击加载更多
weixin_34049948的博客
05-27 2746
首先定义自己的文章结构<div class="news"> <ul class="list"> <li class="flex-between"> <img src="images/1.jpg" alt=""> <div> ...
MVC怎么实现自动加载
小婷子最美的博客
01-16 684
MVC怎么实现自动加载 首先我们这个自动加载类放在的是load.php文件中，新建一个静态方法起名叫load。 static public function load(){ } 然后我们在core目录下新建一个路由文件route.php , 首先便是命名空间，接下来给创建一个类名为route 。 <?php namespace core; class r
spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果
Mr_Smile2014的博客
08-10 1万+
由于手机的携带的方便性和手机的越来越智能和移动网速越来越快，手机已经充斥着人们的生活。随着手机的流行， 移动应用也快速的火了起来比如微商城、手机网页、移动APP等等。既然移动应用这么火，我们今天来讲一下怎样实现在移 动网页中动态加载数据，那么我们怎么实现呢，是像pc网页那样，有个上一页和下一页还是其它的方式。 其实像pc网页那样上一页和下一页肯定不行的，手机屏幕很小，不好点击同时用户体验很差，今天来给大家介绍使用 spring mvc +HTML5实现移动端底部上滑异步加载更多内容分页效果的方式。
FreeMarker几种不同方式的展现数据
热门推荐
Hsing Hsu's Blog
11-08 3万+
FreeMarker是一个模板引擎，一个基于模板生成文本输出的通用工具。 本文主要写了3种方法通过freemarker与java对象数据结合，将数据展现于前台页面。 注：项目jar包 commons-beanutils-1.7.0.jar commons-collections-3.1.jar commons-fileupload-1.2.1.jar commons-io-1.3.2.j
spring mvc 和 AJAX怎么相互调用
最新发布
06-10
1. 在 Spring MVC 的控制器中定义一个处理 AJAX 请求的方法，使用 @ResponseBody 注解将方法返回值转化为 JSON 格式。 2. 在前端页面中使用 AJAX 发送请求到该方法。 3. 接收到请求后，Spring MVC 控制器处理请求...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值