새로 고치지 않고 AJAX를 사용하여 페이지 콘텐츠를 동적으로 수정하는 방법은 무엇입니까?

새로 고침 없이 동적으로 페이지 콘텐츠 수정

문제:

div의 데이터베이스에서 검색된 데이터를 표시하려고 합니다. 링크를 클릭하면 페이지를 새로 고치지 않고 div의 콘텐츠를 업데이트합니다.

해결책:

이를 수행하려면 AJAX(Asynchronous JavaScript and XML)을 사용하면 페이지를 다시 로드하지 않고도 서버에 비동기 요청을 할 수 있습니다. 구현 방법은 다음과 같습니다.

1. JavaScript 함수 만들기:

JavaScript 함수를 트리거하는 링크에 onclick 이벤트 핸들러를 추가합니다. 이 함수는 AJAX를 사용하여 PHP 스크립트에 요청하고 업데이트된 데이터를 검색합니다.

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

2. AJAX 요청 추가:

JavaScript 함수에서 jQuery $.load() 메서드를 사용하여 데이터를 가져오는 코드가 포함된 PHP 스크립트에 AJAX 요청을 보냅니다.

3. PHP 스크립트 만들기:

AJAX 요청을 처리할 별도의 PHP 파일(예: data.php)을 만듭니다. 이 스크립트는 다음을 수행해야 합니다.

1. 데이터베이스에 연결합니다.
2. 요청에 전달된 id 매개변수를 기반으로 데이터를 검색합니다.
3. 검색된 데이터를 클라이언트에 반환합니다. .

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4. Div 콘텐츠 업데이트:

PHP 스크립트의 응답은 ID가 'myStyle'인 div에 표시됩니다. 페이지를 다시 로드하지 않고도 div의 콘텐츠가 동적으로 업데이트됩니다.

추가 참고 사항:

• AJAX 요청 URL 및 데이터베이스 연결을 조정해야 할 수도 있습니다. 특정 환경에 맞게 JavaScript 및 PHP 스크립트를 설정하세요.
• 온라인 리소스를 참조하거나 비동기 프로그래밍에 대한 이해를 높이는 과정을 수강하여 AJAX에 대해 자세히 알아볼 수 있습니다.

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