AJAX +SpringMVC如何实现bootstrap模态框的分页查询功能

发布时间：2023-05-15 07:24:33

AJAX SpringMVC如何实现bootstrap模态框的分页查询功能

Bootstrap模态框是现代网页设计风潮下的一种非常流行的UI元素，牢固占领了网页布局设计的一席之地。Bootstrap中的模态框结合了响应式设计和优美的动画效果，非常适合实现一些交互式的操作。

SpringMVC作为Java结构化WEB开发框架中的佼佼者，它的基本架构是MVC，它的核心是DispatcherServlet，可以将所有的请求都经过它进行处理，最终的数据也是通过它的返回值来返回的。AJAX技术（Asynchronous Javascript And XML），即使用JavaScript异步地在浏览器端与服务器进行数据交互，根据服务器返回的数据再进行局部的刷新，提高了用户体验，并减轻了服务器的压力。

如果将SpringMVC和AJAX与Bootstrap模态框一起运用，可以实现一个非常强大的分页查询功能，为用户提供更加舒适和高效的用户体验。

一、实现思路

要实现Bootstrap模态框的分页查询功能，需要对于模态框的起始页码和总页码信息进行初始化，同时在用户查询之后，将查询到的数据进行异步渲染并呈现给用户。

具体的实现方法如下：

1. 首先，确定需要实现分页查询的页面，这里，以“商品列表”页为例。因为显示商品列表往往需要按照产品类别或者价格，进行排序，尤其是当商品数据量较大时，需要采用分页查询的方式，对数据进行分页显示。

2. 在页面上部添加查询条件，采用Bootstrap控件，使用AJAX技术，实现模糊查询，确保能够查得到所需的数据。同时，在下方添加一个table来展示查询到的数据。

3. 在table下方，添加分页操作逻辑。为了确保查询成功之后分页操作可以不受影响地进行，表格的分页操作不应该将数据重新加载。因此，在初始化页面的时候，应该加入当前页码和总页码的信息。

4. 在分页查询的时候，需要创建一个分页查询的控制器，进行分页查询的处理。查询成功后，需要将查询到的数据返回，并根据总记录数计算总页数，将起始页码和总页码信息写入ModelAndView，返回给前端页面。

5. 页面上部加入一个“分页”控件，当用户点击时，应该根据当前页码向服务器发出分页查询的请求，并将查询到的数据渲染在table中，从而完成分页查询操作。

二、详细实现方法

1. 初始化页面

（1）在Maven中添加各项依赖，注意版本的问题。下面列出的是本文中所用到的依赖：

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>5.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.47</version>
</dependency>
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.3.0</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
    <version>9.0.27</version>
</dependency>

（2）在Web项目的maven配置文件中配置页面资源的路径问题。因为Spring中一个页面的请求是由Controller负责，而返回的数据是由ModelAndView来组装的，因此，需要在spring-mvc.xml配置文件中映射前后端所需的页面资源。需要注意的是，这里的前后端是以WEB-INF下的JSP页面为界定的。

<mvc:resources mapping="/static/**" location="/static/" />
<mvc:annotation-driven />
<bean
  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  <property name="prefix" value="/WEB-INF/views/" />
  <property name="suffix" value=".jsp" />
</bean>

（3）在JSP页面中，添加查询条件、查询按钮、table、分页控件等元素。其中，查询按钮应该添加ajax引擎控制逻辑，触发ajax调用，获取到目标数据之后，刷新table。

因为查询请求是按照条件来设置的，因此，需要将条件封装成JSON对象，提交给后端进行处理。以查询“某个商家的所有商品列表”为例，后端代码如下所示：

@RequestMapping(value="/byvendor",produces="text/html;charset=UTF-8")
    public String getByVendor(HttpServletRequest request,HttpServletResponse response,
          @RequestParam(value="vendorid",required=true)Long vendorId,
          @RequestParam(value="pageNum",defaultValue="1")int pageNum,
          @RequestParam(value="pageSize",defaultValue="20")int pageSize) {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("vendorId",vendorId);
        jsonObject.put("pageNum",pageNum);
        jsonObject.put("pageSize",pageSize);
        String param = jsonObject.toJSONString();
        try {
            String result = HttpUtils.sendPost("http://localhost:8080/getProductByVendor",param);
            JSONObject resJson = JSON.parseObject(result);
            if (resJson.getIntValue("code")==200) {
                JSONObject data = resJson.getJSONObject("data");
                List<Product> productList = JSON.parseArray(data.getString("list"),Product.class);
                request.setAttribute("productList",productList);
                request.setAttribute("vendor",data.getJSONObject("vendor"));
            } else {
                request.setAttribute("errorInfo",resJson.getString("message"));
            }
        } catch (IOException e) {
            logger.error("[getByVendor] error happens with msg["+e.getMessage()+"]");
            request.setAttribute("errorInfo",e.getMessage()+", Pls check the server side for more details!");
        }
        return "product_list";
    }

在此代码中，sendPost方法是从一个HTTP API获取到数据的方法，这里就不在赘述。接下来，将查询结果和条件显示在JSP页面中。

<thead>

<tr>

</tr>

</thead>

<tbody>

<c:forEach items="${productList}" var="p">

<tr>

<td>${p.description}</td>

<td>${p.getPrice()}</td>

<td>${vendor.name}</td>

<td>

<a href="<%=request.getContextPath()%>/product/detail?id=${p.id}">

</a>

</td>

</tr>

</c:forEach>

</tbody>

</table>

</a>

</li>

<c:forEach begin="1" end="${totalPage}" var="index">

<%--Add active class on the current page--%>

<c:if test="${index eq pageNum}">

<li class="page-item active"><a class="page-link">${index}</a></li>

</c:if>

<c:if test="${index ne pageNum}">

<a class="page-link" onclick="