페이지를 다시 로드하지 않고 HTML 페이지 콘텐츠를 동적으로 업데이트하려면 어떻게 해야 합니까?

HTML 페이지 콘텐츠를 동적으로 변경

페이지를 다시 로드하지 않고 웹 콘텐츠를 업데이트하면 사용자 경험을 향상하고 웹사이트 성능을 향상시킬 수 있습니다. 이를 달성하려면 HTML, PHP, JavaScript 및 jQuery와 함께 AJAX(비동기 JavaScript 및 XML)를 활용할 수 있습니다.

다음 예를 고려하세요.

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

<div>

이 코드는 링크를 표시합니다. 데이터베이스에서 다른 콘텐츠를 검색합니다. 링크를 클릭할 때 페이지를 다시 로드하는 대신 AJAX를 사용하여 페이지를 새로 고치지 않고 데이터를 비동기식으로 가져오고 "myStyle" div의 콘텐츠를 업데이트해야 합니다.

이를 달성하려면 다음을 활용할 수 있습니다. 다음 JavaScript 함수:

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

이 함수는 jQuery의 load() 메서드를 사용하여 별도의 PHP 스크립트("data.php")에서 콘텐츠를 가져오고 검색된 데이터가 있는 "myStyle" div의 콘텐츠.

PHP 스크립트("data.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'];
}

이 접근 방식을 구현하면 페이지를 다시 로드하지 않고도 페이지 콘텐츠를 동적으로 업데이트할 수 있으므로 사용자는 필요에 따라 다양한 콘텐츠에 액세스하면서 웹사이트를 원활하게 탐색할 수 있습니다.

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