关于使用ajax 局部获取、更新数据

xiaoxiao2021-02-28  100

  主要的思想是 在A.jsp   页面  使用ajax提交后,通过controller  到数据库中根据条件查询新的数据,通过list集合,返回数据到 B.jsp页面(这个jsp页面是要跟新数据的局部部分,这个页面只包含数据内容,因为后面要将这个jsp 页面通过 <%@  include  file="jsp的文件位置"% > 引入到  我们的主页面 )。

        先上 :主页面 与提交ajax的部分代码,这是   A.jsp   页面

<div class=" marign_t174">     <div class="page__bd" id="key">        <%@ include file="B.jsp"%>     </div> </div>

<script>标签

<script>

  $(function(){

//通过判断提交数据     $("#education").change(function(){     $("#idform").ajaxSubmit({     type:'POST',     dataType:'text',     url:'searchbykeyword', //数据提交到controller     success:function(html){     $("#key").html(html);     }     });     })

</script>

 

再上 controller  代码:

/** * 发布的岗位根据学历、年龄、月薪、行业类别、工作地区条件查询刷新 * @param model * @return */ @RequestMapping(value="/searchbykeyword") public  String searchbykeyword(Model model, HttpServletRequest rquest,StationBean bean){ if(bean.getName()!=null&&bean.getName()!=""){ bean.setName(bean.getName()); } List<StationBean> list = stationService.findAllData(bean); model.addAttribute("list", list); //返回到我上面提到的jsp页面,进行数据展示 return "B";(也就是 B.jsp 页面) } 

     再来个 B.jsp  页面:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>      <table border="1px" bordercolor="white" style="width: 100%;"  cellspacing="0"  cellspacing="0">            <tr class="title" style="background-color: #ffdcbb;height: 50px;">            <th>应聘岗位</th>            <th>应聘人</th>            <th>应聘人电话</th>            <th>应聘人手机</th>             <th>应聘时间</th>            </tr>         <c:forEach items="${list }" var="list">             <tr style="height: 40px;text-align: center;">                   <td>${list.position_type }</td>                    <td>${list.user_name }</td>                    <td>${list.phone }</td>                     <td>${list.mobile }</td>                               <td>                     <fmt:parseDate value="${list.create_time }" pattern="yyyy-MM-dd" var="receiveDate"></fmt:parseDate>                   <fmt:formatDate value="${receiveDate}" pattern="yyyy-MM-dd" ></fmt:formatDate>                             </td>             </tr>         </c:forEach>         </table>

到这里就可以了,绝对是可以成功的。之前还试过其他的方法,但是没有成功。

转载请注明原文地址: https://www.6miu.com/read-23215.html

最新回复(0)