Laden Sie den Inhalt des Box dynamisch mit AJAX

Dieses Tutorial zeigt, dass dynamische Seitenfelder über AJAX geladen werden und sofortige Aktualisierung ohne vollständige Seiten -Nachladen ermöglicht werden. Es nutzt JQuery und JavaScript. Betrachten Sie es als einen benutzerdefinierten Inhaltsbox-Loader im Facebook-Stil.

Schlüsselkonzepte:

• Ajax und JQuery laden und aktualisieren Sie Seitenfächer ohne komplette Seiten -Nachladen und spiegeln die Funktionalität von Websites wie Facebook und Twitter wider.
• Der Prozess beinhaltet das Laden von Kästchen nach dem DOM, verwendete eine AJAX-Funktion für jedes Feld, das Anzeigen von Ladenachrichten und die Verwendung eines serverseitigen Skripts (z. B. PHP), um die HTML für jedes Feld zurückzugeben. Diese HTML wird dann in das entsprechende Feld auf der Webseite eingefügt.
• Die Dynamik des Systems beruht auf der Verwendung des id -Trägers jedes Feldes, um Variablen zu generieren, die dann mit dem serverseitigen Skript übereinstimmen. Inhalte können leicht neu geladen werden, und neue Felder können ohne zusätzliche CSS oder JavaScript hinzugefügt werden.

Vorteile dieses AJAX -Ansatzes:

• schnellere Seitenladezeiten aufgrund des Ladens des Inhaltsfeldes nach dem DOM
Inhalt in Kästchen ohne vollständige Seite neu laden.
richtet sich an moderne Webentwicklungspraktiken, die von großen Plattformen (Facebook, Twitter usw.) verwendet werden.
Es erfordert kein zusätzliches CSS oder JavaScript -Code.

Wie es funktioniert:

Nach dem Laden von Seite ruft JQuery eine AJAX -Funktion für jedes Feld auf.
Eine Ladenachricht wird angezeigt.
Ein serverseitiges Skript (z. B. Php) gibt das HTML für das Box zurück.
Der Inhalt wird in das Box geladen.
Inhalt wird leicht neu geladen, indem Sie über die Box schweben, um ein Aktualisierungsbild anzuzeigen. Wenn Sie auf dieses Bild klicken, wird eine Inhalts -Aktualisierung ausgelöst.

Dynamische Funktionalität:

Jedes Feld ist ein

mit einem einzigartigen

-Merkmal. Elemente in diesem <div> verwenden das gleiche <code>id. JQuery verwendet dieses <div> mit dem serverseitigen Skript, wodurch das System dynamisch ist, da alle Variablen basierend auf der <code>id des Feldes generiert werden. id id JQuery Code:

Dieser Code läuft nach dem Laden von Seite, initialisierender Feldsteuerungen und Anhänge von Ereignissen.

Diese Funktion lädt den Inhalt in ein untergeordnetes

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...
});

basierend auf dem bereitgestellten

. Es schafft dynamisch Variablen, um Objekte zu handhaben. Der <div> wird verwendet, um sowohl den Container <code>box_id als auch das entsprechende PHP -Skript zu identifizieren (z. B. box_id). <div> <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!");   }
}

HTML -Code (Beispiel):

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

CSS -Code:

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...
});

Bilder:

• loader.gif
• refresh.png

(Der FAQS -Abschnitt aus der ursprünglichen Eingabe wurde weggelassen, da es sich um einen separaten, nicht verwandten Abschnitt zur allgemeinen Ajax -Verwendung handelte.)