Ajax jquery realizes the refresh effect of a div on the page

The original code is this:

<div class='control-group'>
   <label class='control-label' for='inputSelect'>Affiliated unit</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'>Required stamp</label>
   <div class='controls' id="updateac" style="height: 40px">
    <c:if test="${empty sealtables}">
    <label class='radio inline'> No stamp available, please go to apply for a stamp</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>

Effect screenshots:

To achieve the effect, click the drop-down list in the red marked part of the picture, and the value of the check box below will change with the change of the drop-down list.

First, let me talk about the solution: add an onchange event to the drop-down list, then submit it to the controller asynchronously through ajax, perform a database query, and then return to ModelAndView. The view set by ModelAndView is a new jsp page, and the code embedded in the jsp page is the div code to be changed.

Add an onchange event to the drop-down list:

Add ajax asynchronous refresh event for time:

The returned pressed surface is loaded directly in the 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>

Submit to updateAc.action:

According to the value selected in the drop-down list, the corresponding information of the value is searched from the database and returned, and then the comp.jsp page is rendered

@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="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://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'> No stamp available, please go to apply for a stamp</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>

Now you can implement a partial refresh of the page.

Summarize

This is the end of this article about how to use ajax jquery to refresh a div on a page. For more information about ajax jquery page div refresh, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Ajax partial refresh method of jsp content under a div
Summary of jQuery local div refresh and global refresh methods
jQuery page turning component yunm.pager.js realizes the idea of partial refresh of div

<<: Linux uses dual network card bond and screwdriver interface

>>: Detailed explanation of views in MySQL