AJAX를 사용하여 페이지 새로 고침 없이 웹 페이지 콘텐츠를 동적으로 업데이트하는 방법은 무엇입니까?

새로 고침 없이 HTML 페이지 콘텐츠 업데이트

웹 페이지 콘텐츠를 다시 로드하지 않고 동적으로 업데이트하려면 AJAX(Asynchronous JavaScript and XML)가 필요합니다. 고용. 이 문서에서는 PHP, jQuery 및 JavaScript를 사용하여 이를 달성하는 방법을 설명합니다.

접근 방식

onclick 핸들러는 클라이언트 측에서 실행되므로 PHP 함수를 직접 호출하는 것은 불가능합니다. 대신 AJAX를 활용하는 JavaScript 함수를 사용하여 PHP 스크립트를 호출하고 원하는 데이터를 검색합니다.

구현

1. jQuery 함수 만들기:

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

2. 별도의 PHP 스크립트(data.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>

3. HTML 통합 :

<code class="html"><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>

작동 방식

• 링크를 클릭하면 recp() 함수가 호출됩니다. .load()를 사용하여 id를 매개변수로 사용하여 data.php의 콘텐츠를 가져옵니다.
• data.php는 필요한 데이터베이스 쿼리를 실행하고 지정된 id에 대한 para 값을 반환합니다.
• jQuery 업데이트 #myStyle 요소의 콘텐츠를 반환된 값으로 업데이트하여 새로 고침 없이 효과적으로 페이지를 업데이트합니다.

위 내용은 AJAX를 사용하여 페이지 새로 고침 없이 웹 페이지 콘텐츠를 동적으로 업데이트하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!