Wie lade ich den Inhalt eines Div mit jQuery und Ajax beim Klicken auf eine Schaltfläche neu?

Div-Inhalt mit jQuery und Ajax neu laden

Problem:

Sie müssen den neu laden Inhalt eines bestimmten Divs auf Knopfdruck, ohne die gesamte Seite zu aktualisieren.

Codebeispiel:

<code class="html"><div role="button" class="marginTop50 marginBottom">
  <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
  <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50" />
</div>

<div id="list">
  <!-- Content to be reloaded -->
</div></code>

Falscher Ansatz:

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $("#step1Content").load();
});</code>

Dieser Code ist falsch, da die Methode „load()“ eine URL zum Laden von Inhalten benötigt.

Lösungen:

jQuerys Load( )-Methode kann mit einer URL zum Laden von Remote-Inhalten verwendet werden. Um jedoch Inhalte von der aktuellen Seite neu zu laden, können wir den folgenden Ansatz verwenden:

1. Absolute URL mit Hash verwenden:

<code class="javascript">$("#list").load(location.href + " #list");</code>

Dadurch wird der Inhalt des Elements mit der ID „list“ aus der aktuellen URL geladen. Beachten Sie das Leerzeichen vor dem zweiten „#“-Zeichen.

2. Ajax verwenden:

Ein anderer Ansatz ist die Verwendung von Ajax. Bei diesem Ansatz stellen wir eine Ajax-Anfrage an den Server, rufen den Inhalt ab und aktualisieren das Div.

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $.ajax({
    url: "YOUR_ENDPOINT_URL",
    success: function (data) {
      $("#list").html(data);
    },
  });
});</code>

In diesem Fall ist „YOUR_ENDPOINT_URL“ der Serverendpunkt, der den zu ladenden Inhalt zurückgibt in die Div.

Zusätzliche Hinweise:

1. Stellen Sie sicher, dass die Schaltfläche „Erneut erfassen“ aktiviert ist, bevor Sie den Inhalt neu laden.
2. Wenn Sie den Ajax-Ansatz verwenden, stellen Sie sicher, dass der Serverendpunkt den Inhalt im entsprechenden Format (HTML oder JSON) zurückgibt.

Das obige ist der detaillierte Inhalt vonWie lade ich den Inhalt eines Div mit jQuery und Ajax beim Klicken auf eine Schaltfläche neu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!