Comment recharger le contenu d'une Div avec jQuery et Ajax en cliquant sur un bouton ?

Recharger le contenu Div avec jQuery et Ajax

Problème :

Vous devez recharger le contenu d'un div spécifique en cliquant sur un bouton sans actualiser la page entière.

Exemple de code :

<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>

Approche incorrecte :

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

Ce code est incorrect car la méthode load() a besoin d'une URL pour charger le contenu.

Solutions :

load( ) peut être utilisée avec une URL pour charger du contenu distant. Cependant, pour recharger le contenu de la page actuelle, nous pouvons utiliser l'approche suivante :

1. Utiliser l'URL absolue avec hachage :

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

Cela charge le contenu de l'élément avec l'ID "list" à partir de l'URL actuelle. Notez l'espace avant le deuxième signe "#".

2. Utiliser Ajax :

Une autre approche consiste à utiliser Ajax. Avec cette approche, nous envoyons une requête Ajax au serveur, récupérons le contenu et mettons à jour le div.

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

Dans ce cas, "YOUR_ENDPOINT_URL" est le point de terminaison du serveur qui renvoie le contenu à charger. dans le div.

Remarques supplémentaires :

1. Assurez-vous que le bouton « Capturer à nouveau » est activé avant de recharger le contenu.
2. Si vous utilisez l'approche Ajax, assurez-vous que le point de terminaison du serveur renvoie le contenu dans le format approprié (HTML ou JSON).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!