Wie aktualisiere ich Webseiteninhalte dynamisch mit AJAX ohne Neuladen?

Change HTML Page Contents Dynamically Without Reloading

You desire to update the contents of a webpage dynamically, specifically a div, without triggering a page refresh. This can be achieved through AJAX (Asynchronous JavaScript and XML).

jQuery Approach

1. Define JavaScript Function:

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

2. Add Event Handlers:
   Replace the onClick handlers in your HTML with the recp function:

   <code class="html"><a href="#" onClick="recp('1')" &gt; One   &lt;/a&gt;
   <a href="#" onClick="recp('2')" &gt; Two   &lt;/a&gt;
   <a href="#" onClick="recp('3')" &gt; Three &lt;/a&gt;</code>

3. Create PHP Script:
   Create a separate PHP file, such as data.php, that handles the data retrieval:

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

4. Load Data Dynamically:
   When a link is clicked, the recp function uses AJAX to load the data from data.php into the div with the id 'myStyle':

   <code class="html"><div id='myStyle'&gt;
   &lt;/div&gt;</code>

Note: Ensure that the path to data.php in the jQuery load() function is correct and that the PHP file has appropriate permissions.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich Webseiteninhalte dynamisch mit AJAX ohne Neuladen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!