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

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

Recommend

Detailed explanation of how Tomcat implements asynchronous Servlet

Preface Through my previous Tomcat series of arti...

CSS realizes div completely centered without setting height

Require The div under the body is vertically cent...

Building .NET Core 2.0 + Nginx + Supervisor environment under Centos7 system

1. Introduction to Linux .NET Core Microsoft has ...

Nginx reverse proxy learning example tutorial

Table of contents 1. Reverse proxy preparation 1....

43 Web Design Mistakes Web Designers Should Watch Out For

This is an article about website usability. The a...

CSS realizes the layout method of fixed left and adaptive right

1. Floating layout 1. Let the fixed width div flo...

How to write object and param to play flash in firefox

Copy code The code is as follows: <object clas...

Vue component communication method case summary

Table of contents 1. Parent component passes valu...

win2008 server security settings deployment document (recommended)

I had been working on the project before the New ...

Solution to the problem that docker logs cannot be retrieved

When checking the service daily, when I went to l...

...

Navicat for MySql Visual Import CSV File

This article shares the specific code of Navicat ...

How to completely uninstall Docker Toolbox

Docker Toolbox is a solution for installing Docke...

Solution to the problem that docker nginx cannot be accessed after running

## 1 I'm learning docker deployment recently,...

Detailed explanation of storage engine in MySQL

MySQL storage engine overview What is a storage e...