Chargez le contenu de la boîte dynamiquement à l'aide de AJAX

Ce didacticiel montre la création de boîtes de page dynamiques chargées via AJAX, permettant un actualisation instantanée sans rechargement de page complète. Il exploite JQuery et JavaScript. Considérez-le comme un chargeur de boîtes de contenu de style Facebook personnalisé.

Concepts clés:

• ajax et jQuery Charger et actualiser dynamiquement les boîtes de page sans rechargement de page complète, reflétant les fonctionnalités de sites comme Facebook et Twitter.
• Le processus implique de charger des boîtes après la préparation du DOM, en utilisant une fonction AJAX pour chaque case, en affichant des messages de chargement et en utilisant un script côté serveur (par exemple, PHP) pour renvoyer le HTML pour chaque case. Ce HTML est ensuite inséré dans la zone correspondante de la page Web.
• Le dynamisme du système découle de l'utilisation de l'attribut id de chaque boîte pour générer des variables, qui sont ensuite appariées avec le script côté serveur. Le contenu est facilement rechargé et de nouvelles boîtes peuvent être ajoutées sans CSS ou JavaScript supplémentaires.

Avantages de cette approche ajax:

• temps de chargement de page plus rapide dû au chargement de la boîte de contenu après que le Dom est prêt.
• Rafraîchissement du contenu dans les boîtes sans rechargement de page complète.
• s'aligne sur les pratiques de développement Web modernes utilisées par les principales plateformes (Facebook, Twitter, etc.).
• L'ajout de nouvelles boîtes ne nécessite pas de CSS ou de code JavaScript supplémentaires.

comment cela fonctionne:

1. après le chargement de la page, jQuery appelle une fonction ajax pour chaque case.
2. Un message de chargement s'affiche.
3. Un script côté serveur (par exemple, PHP) renvoie le HTML pour la boîte.
4. Le contenu est chargé dans la boîte.
Le contenu
5. est facilement rechargé en survolant la boîte pour révéler une image de rafraîchissement; Cliquez sur cette image déclenche un rafraîchissement de contenu.

Fonctionnalité dynamique:

Chaque boîte est un <div> avec un attribut unique <code>id. Les éléments de ce <div> utilisent le même <code>id. jQuery utilise ce id pour correspondre au script côté serveur, ce qui rend la dynamique du système car toutes les variables sont générées en fonction de la boîte id.

Code jQuery:

Ce code s'exécute après le chargement de la page, l'initialisation des contrôles de la boîte et la connexion des événements.

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

Cette fonction charge le contenu dans un enfant <div> en fonction de la fournie <code>box_id. Il crée dynamiquement des variables pour gérer les objets. Le box_id est utilisé pour identifier à la fois le conteneur <div> et le script PHP correspondant (par exemple, <code>box_id.php).

function loadboxcontent(box_id){
    if (box_id == '') { return false; }

    var loading_image="/images/loader.gif";
    var loading_text = ' Loading '+box_id.replace(/-/g," ")+'...';
    var script_path = "../php/";
    var box_container = document.getElementById(box_id);
    box_container.innerHTML = loading_text;

    var result = false;
    $.ajax({
      url: script_path+box_id+".php",
      type: 'POST',
      async: true,
      data: {blogs: 30},
      success: function(data) {
         result = true;
         document.getElementById(box_id).innerHTML = data;
      }
    });
    if (result == false) { document.getElementById(box_id).innerHTML = 'Could not refresh data, try refreshing the page'; }
    else {  alert("Content refreshed successfully!");   }
}

CODE HTML (Exemple):

<div id="box-id1" class="box">
  <h2><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">New Blogs</a></h2>
  <div id="controls-id1" class="controls">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174119443682979.png" class="lazy" alt="Load Box Content Dynamically using AJAX "></a>
  </div>
</div>

Code CSS:

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

Images:

• loader.gif
• refresh.png

(La section FAQ de l'entrée d'origine a été omise car il s'agissait d'une section distincte et non apparentée sur l'utilisation générale de l'Ajax.)