페이지 새로 고침 없이 AJAX를 사용하여 Div의 콘텐츠를 동적으로 업데이트하려면 어떻게 해야 합니까?

HTML - 새로 고침 없이 동적으로 페이지 내용 변경

도전:

데이터를 검색했습니다. 데이터베이스에서 가져와 div에 표시됩니다. 링크를 클릭하면 페이지를 새로 고치지 않고 div의 내용을 업데이트하려고 합니다.

해결책:

AJAX를 활용하면 페이지 새로 고침을 우회하고 div의 내용을 업데이트할 수 있습니다. 콘텐츠를 원활하게 작동 방식은 다음과 같습니다.

클라이언트측(HTML 및 JavaScript):

• JavaScript 함수를 호출하는 이벤트 핸들러로 링크를 생성합니다.
• 해당 JavaScript 함수에서 jQuery의 load() 메서드를 사용하여 매개변수(예: $('#myStyle').load('data.php?id=' id);).

서버측(PHP):

• AJAX 요청을 처리하는 별도의 PHP 파일을 만듭니다.
• 받은 매개변수를 사용하여 데이터베이스에서 데이터를 가져옵니다. AJAX 요청에서
• 업데이트된 콘텐츠를 브라우저에 반환합니다.

예:

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

<div>

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

// In data.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'];
}

이 단계를 따르면 전체 페이지를 새로 고치지 않고도 div의 내용을 동적으로 업데이트하여 웹 사이트를 만들 수 있습니다. 더욱 반응적이고 사용자 친화적입니다.

위 내용은 페이지 새로 고침 없이 AJAX를 사용하여 Div의 콘텐츠를 동적으로 업데이트하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!