AJAX를 사용하여 페이지를 새로 고치지 않고 HTML 페이지 콘텐츠를 동적으로 변경하려면 어떻게 해야 합니까?

AJAX를 사용하여 다시 로드하지 않고 HTML 페이지 콘텐츠 변경

링크가 있을 때 페이지를 새로 고치지 않고 DIV 요소의 콘텐츠를 업데이트하려고 합니다. 클릭했습니다. PHP와 AJAX를 사용하여 이를 달성하는 방법은 다음과 같습니다.

PHP 구성:

• 다음에 연결하는 PHP 스크립트(예: data.php)를 만듭니다. 매개변수 ID를 기반으로 데이터를 검색합니다.

HTML 마크업:

• 식별자가 있는 DIV 요소 생성(예: myStyle) .
• ID를 인수로 사용하여 JavaScript 함수를 호출하는 onClick 핸들러가 있는 링크를 추가하세요.

jQuery를 사용한 JavaScript:

• jQuery 라이브러리를 포함합니다.
• AJAX를 사용하여 data.php의 데이터를 myStyle DIV로 로드하는 recp 함수를 정의합니다.

예제 코드:

HTML:

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

<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>

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>

이 솔루션을 구현한 후 다음을 클릭하세요. 링크는 페이지를 다시 로드하지 않고도 myStyle DIV의 콘텐츠를 업데이트합니다.

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