ajax+jquery实现页面局部刷新效果简介
发布时间：2022-04-20 09:41:09 所属栏目：语言 来源：互联网
导读：在web开发中我们可能会遇到页面局部刷新的需求，那么我们要如何来实现呢？这篇文章就给大家分享一下ajax+jquery实现页面某一个div刷新效果的实例代码，希望大家理解和学习页面局部刷新的知识有所帮助。 原始代码是这样的： div class=control-group label cl
|
在web开发中我们可能会遇到页面局部刷新的需求，那么我们要如何来实现呢？这篇文章就给大家分享一下ajax+jquery实现页面某一个div刷新效果的实例代码，希望大家理解和学习页面局部刷新的知识有所帮助。 原始代码是这样的： <div class='control-group'> <label class='control-label' for='inputSelect'>所属单位</label> <div class='controls'> <select id='inputSelect' name="acCpname" onchange="updateAc()"> <c:forEach items="${list }" var="list"> <option value="${list.cpname}">${list.cpname }</option> </c:forEach> </select> </div> </div> <div class='control-group'> <label class='control-label'>所需印章</label> <div class='controls' id="updateac" style="height: 40px"> <c:if test="${empty sealtables}"> <label class='radio inline'> 无可用印章，请前往申请印章 </label> </c:if> <c:if test="${not empty sealtables }"> <c:forEach items="${sealtables}" var="sealtable" varStatus="status"> <label class='radio inline'> <input type='checkbox' name="selectSealType" value='${sealtable.sealtype}' /> ${sealtable.sealtype} </label> </c:forEach> </c:if> </div> </div> 想要实现的效果，图片红色标记的部分，点击下拉列表，下面的复选框的值跟随下拉列表的变化而变化。 首先说一下解决思路：为下拉列表添加onchange事件，然后ajax异步提交给controller，进行数据库查询，然后返回ModelAndView，ModelAndView设置的view为一个新的jsp页面，该jsp页面里面嵌套的代码为要改变的div代码。 根据下拉列表选择的值然后从数据库中进行查找该值对应的信息返回，然后渲染comp.jsp页面 @RequestMapping(value = "/updateAc.action") public ModelAndView updateComp(HttpServletRequest request,Model model){ ModelAndView modelAndView = new ModelAndView(); String companyname = request.getParameter("company"); List<Sealtable> sealtables = service.sealTableBySealCpName(companyname); modelAndView.addObject("sealtables", sealtables); modelAndView.setViewName("comp"); return modelAndView; （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
