Dynamic Content Updates with AJAX
Problem:
You aim to update the content of a div without reloading the page upon clicking a link.
Solution without Refreshing:
Employing AJAX (Asynchronous JavaScript and XML), you can retrieve updated content without reloading the page.
Implementation:
Handle Link Events with JavaScript:
Assign JavaScript event handlers to links to invoke the data retrieval function.
<code class="html"><a href="#" onClick="recp('1')" > One </a></code>
AJAX Request with jQuery:
The recp() function uses jQuery's .load() method to retrieve data from a PHP script without reloading the page.
<code class="javascript">function recp(id) { $('#myStyle').load('data.php?id=' + id); }</code>
Retrieve Data with PHP:
Create a PHP script (e.g., data.php) that retrieves data based on the ID passed in the URL.
<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>
Render Updated Content:
The retrieved data is loaded into the div with id='myStyle'.
<code class="html"><div id='myStyle'> </div></code>
With this implementation, clicking links updates the div's content dynamically, providing a seamless and responsive user experience without refreshing the page.
以上がAJAX を使用してページを更新せずに動的コンテンツを更新する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。