Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

Ajax jquery realisiert den Aktualisierungseffekt eines Div auf der Seite

Der Originalcode lautet:

<div Klasse = "Kontrollgruppe">
   <label class='control-label' for='inputSelect'>Zugehörige Einheit</label>
   <div Klasse='Steuerung'>
    <Auswahl id='inputSelect' name="acCpname" onchange="updateAc()">

    <c:forEach Elemente="${Liste }" var="Liste">
     <option value="${list.cpname}">${list.cpname }</option>
    </c:fürJeden>
    </Auswählen>
   </div>
   </div>
   <div Klasse = "Kontrollgruppe">
   <label class='control-label'>Erforderlicher Stempel</label>
   <div Klasse = "Steuerungen" id = "updateac" Stil = "Höhe: 40px">
    <c:if test="${empty sealtables}">
    <label class='radio inline'>Kein Stempel verfügbar, bitte beantragen Sie einen Stempel</label>
    </c:if>
    <c:if test="${nicht leere Sealtables }">
    <c:forEach items="${sealtables}" var="sealtable"
     varStatus="status">
     <Bezeichnungsklasse='Radio inline'> <Eingabetyp='Kontrollkästchen'
     Name = "Siegeltyp auswählen" Wert = "${sealtable.sealtype}" />
     ${sealtable.sealtype}
     </Bezeichnung>
    </c:fürJeden>
    </c:if>
   </div>
   </div>

Screenshots der Effekte:

Um den Effekt zu erzielen, klicken Sie auf die Dropdown-Liste im rot markierten Teil des Bildes. Der Wert des Kontrollkästchens darunter ändert sich mit der Änderung der Dropdown-Liste.

Lassen Sie mich zunächst über die Lösung sprechen: Fügen Sie der Dropdown-Liste ein Onchange-Ereignis hinzu, senden Sie es dann asynchron über Ajax an den Controller, führen Sie eine Datenbankabfrage aus und kehren Sie dann zu ModelAndView zurück. Die von ModelAndView festgelegte Ansicht ist eine neue JSP-Seite, und der in die JSP-Seite eingebettete Code ist der zu ändernde Div-Code.

Fügen Sie der Dropdown-Liste ein „On-Change“-Ereignis hinzu:

Fügen Sie ein asynchrones Ajax-Aktualisierungsereignis für die Zeit hinzu:

Die zurückgepresste Oberfläche wird direkt in das Div geladen.

<Skript>
 Funktion updateAc() {
 $.ajax({
  Typ: "POST",
  URL: „${pageContext.request.contextPath}/updateAc.action“,
  Daten: {
  Unternehmen: $('#inputSelect').val()
  },
  Datentyp: "html",
  Cache: falsch,
  asynchron: wahr,
  Inhaltstyp: "application/x-www-form-urlencoded; Zeichensatz=utf-8",
  Erfolg: Funktion (Daten) {
  $("#updateac").html(Daten);
  },
  Fehler: Funktion () {
  }
 });
 }
</Skript>

An updateAc.action senden:

Entsprechend dem in der Dropdown-Liste ausgewählten Wert werden die entsprechenden Informationen des Wertes in der Datenbank gesucht und zurückgegeben. Anschließend wird die comp.jsp-Seite gerendert.

@RequestMapping(Wert = "/updateAc.action")
  öffentliche ModelAndView updateComp(HttpServletRequest-Anforderung,Model-Modell){
   ModellAndView modelAndView = neues ModellAndView();
   String Firmenname = request.getParameter("Firma");
   List<Sealtable> sealtables = service.sealTableBySealCpName(Firmenname);
   modelAndView.addObject("siegeltabellen", siegeltabellen);
   modelAndView.setViewName("comp");
   Modell und Ansicht zurückgeben;
  }

Datei:

<%@ Seitensprache="java" Inhaltstyp="text/html; Zeichensatz=UTF-8"
 Seitenkodierung="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 Klasse = "Steuerungen" id = "updateac" Stil = "margin-left: -20px;margin-top: -15px">
 <c:if test="${empty sealtables}">
  <label class='radio inline'>Kein Stempel verfügbar, bitte beantragen Sie einen Stempel</label>
 </c:if>
 <c:if test="${nicht leere Sealtables }">
  <c:forEach items="${sealtables}" var="sealtable" varStatus="status">
   <Bezeichnungsklasse='Radio inline'> <Eingabetyp='Kontrollkästchen'
    Name = "Siegeltyp auswählen" Wert = "${sealtable.sealtype}" />
    ${sealtable.sealtype}
   </Bezeichnung>
  </c:fürJeden>
 </c:if>
</div>

Nun können Sie eine teilweise Aktualisierung der Seite durchführen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Ajax JQuery zum Aktualisieren eines Div auf einer Seite. Weitere Informationen zum Aktualisieren von Ajax JQuery-Seiten-Divs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Ajax-Methode zur teilweisen Aktualisierung von JSP-Inhalten unter einem Div
  • Zusammenfassung der lokalen Div-Aktualisierung und der globalen Aktualisierungsmethoden von jQuery
  • Die jQuery-Seitenumblätterkomponente yunm.pager.js realisiert die Idee der teilweisen Aktualisierung von div

<<:  Linux nutzt duale Netzwerkkartenbindung und Schraubendreherschnittstelle

>>:  Detaillierte Erklärung der Ansichten in MySQL

Artikel empfehlen

Das WeChat-Applet realisiert ein Verknüpfungsmenü

Um das Kursdesign zu realisieren, habe ich kürzli...

So kompilieren und installieren Sie xdebug in einer Ubuntu-Umgebung

Dieser Artikel beschreibt, wie xdebug in einer Ub...

So konfigurieren Sie Bash-Umgebungsvariablen in Linux

Shell ist ein in der Programmiersprache C geschri...

Projektpraxis zum Bereitstellen von Docker-Containern mit Portainer

Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.21 winx64

Dieser Artikel fasst die Hinweise zur Installatio...

Detailliertes Tutorial zur Installation von Python 3.8.1 unter Linux

Dieses Beispiel nimmt die Installation von Python...

Verwenden Sie vue2+elementui für Hover-Prompts

Die Hover-Prompts von Vue2+elementui sind in exte...

So installieren Sie Docker mit YUM

Wie in der folgenden Abbildung dargestellt: Wenn ...

So implementieren Sie ein responsives Layout in Vue-CLI

Wenn wir Frontend-Entwicklung betreiben, werden w...

js implementiert das Umschalten von Bildern per Maus (ohne Timer)

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Vorkompilierung in einem Artikel verstehen

1. Vorteile der Vorkompilierung Wir haben alle di...

Implementierung der Docker Compose-Mehrcontainerbereitstellung

Inhaltsverzeichnis 1. WordPress-Bereitstellung 1....

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

Wenn wir möchten, dass mehr Leute die von uns ers...