Wie kann ich den Inhalt einer HTML-Seite dynamisch ändern, ohne die Seite mithilfe von AJAX zu aktualisieren?

HTML-Seiteninhalte ohne Neuladen mit AJAX ändern

Sie möchten den Inhalt eines DIV-Elements aktualisieren, ohne die Seite zu aktualisieren, wenn ein Link vorhanden ist geklickt. So können Sie dies mit PHP und AJAX erreichen:

PHP-Konfiguration:

• Erstellen Sie ein PHP-Skript (z. B. data.php), das eine Verbindung zu Ihrem herstellt Datenbank und ruft die Daten basierend auf der Parameter-ID ab.

HTML-Markup:

• Erstellen Sie ein DIV-Element mit einem Bezeichner (z. B. myStyle). .
• Fügen Sie Links mit onClick-Handlern hinzu, die eine JavaScript-Funktion mit der ID als Argument aufrufen.

JavaScript mit jQuery:

• Fügen Sie die jQuery-Bibliothek ein.
• Definieren Sie eine Recp-Funktion, die AJAX verwendet, um die Daten aus data.php in das myStyle-DIV zu laden.

Beispielcode:

HTML:

<code class="html"><script type="text/javascript">
  function recp(id) {
    $('#myStyle').load('data.php?id=' + id);
  }
</script>

<a href="#" onClick="recp('1')">One</a>
<a href="#" onClick="recp('2')">Two</a>
<a href="#" onClick="recp('3')">Three</a>

<div id='myStyle'>
</div></code>

PHP:

<code class="php"><?php
  require ('myConnect.php');     
  $id = $_GET['id'];
  $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
  if( mysql_num_rows($results) > 0 )
  {
   $row = mysql_fetch_array( $results );
   echo $row['para'];
  }
?></code>

Sobald Sie diese Lösung implementiert haben, klicken Sie auf Durch die Links wird der Inhalt des myStyle DIV aktualisiert, ohne dass die Seite neu geladen werden muss.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt einer HTML-Seite dynamisch ändern, ohne die Seite mithilfe von AJAX zu aktualisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!