ajax+jquery实现页面局部刷新效果介�
Admin 2021-04-02 群英技术资�
在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代码�
为下拉列表添加onchange事件�
为时间添加ajax异步刷新事件�
返回的压面直接在div中加�
<script> function updateAc() { $.ajax({ type : "POST", url : '${pageContext.request.contextPath}/updateAc.action', data : { company : $('#inputSelect').val() }, dataType : "html", cache : false, async : true, contentType : "application/x-www-form-urlencoded;charset=utf-8", success : function(data) { $("#updateac").html(data); }, error : function() { } }); } </script>
提交给updateAc.action:
根据下拉列表选择的值然后从数据库中进行查找该值对应的信息返回,然后渲染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; }
comp.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="https://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="https://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%-- <%@ include file="model.jsp"%> --%> <div class='controls' id="updateac" style="margin-left: -20px;margin-top: -15px"> <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>
现在就可以实现页面的局部刷新�
以上就是关于ajax jquery实现页面某一个div刷新效果的介绍,想必大家对于实现页面局部刷新都一定的了解了,大家能够参考上述内容来实现局部刷新功能�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
� vue2 升级� vue3,vue3 是可以兼� vue2 的,所� vue3 可以采用 vue2 的选项式API。这篇文章主要介绍了vue3 setup() 高级用法,需要的朋友可以参考下
这篇文章主要给大家分享js包装对象的内容,下文有具体的介绍和实例,对新手学习和理解js包装对象有一定的帮助,有需要的朋友可以参考借鉴,下面我们一起来学习一下吧�
这篇文章主要给大家介绍了关于Angular管道PIPE的相关资�,管道的作用就是传�,并且不同的管道具有不同的作用,需要的朋友可以参考下
这篇文章给大家分享的是jQuery实现轮播效果的示例。小编觉得挺实用的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
这篇文章主要介绍了解决js中的setInterval清空定时器不管用问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078