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刷新效果的介绍,想必大家对于实现页面局部刷新都一定的了解了,大家能够参考上述内容来实现局部刷新功能�

标签� jquery局部刷�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部