PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션

Ajax(비동기 JavaScript 및 XML)를 사용하면 페이지를 다시 로드하지 않고도 동적 콘텐츠를 추가할 수 있습니다. PHP와 Ajax를 사용하면 제품 목록을 동적으로 로드할 수 있습니다. HTML은 Ajax 요청이 로드된 후 데이터가 추가되는 컨테이너 요소가 있는 페이지를 생성합니다. JavaScript는 Ajax를 사용하여 XMLHttpRequest를 통해 서버에 요청을 보내 서버에서 JSON 형식의 제품 데이터를 가져옵니다. PHP는 MySQL을 사용하여 데이터베이스에서 제품 데이터를 쿼리하고 이를 JSON 형식으로 인코딩합니다. JavaScript는 JSON 데이터를 구문 분석하여 페이지 컨테이너에 표시합니다. 버튼을 클릭하면 제품 목록을 로드하라는 Ajax 요청이 트리거됩니다.

Ajax를 사용한 PHP: 동적으로 로드된 콘텐츠를 생성하기 위한 솔루션

소개

Ajax(Asynchronous JavaScript and XML)는 전체 페이지를 다시 로드하지 않고도 콘텐츠를 로드할 수 있는 강력한 기술입니다. 웹 페이지에. 이 기사에서는 PHP와 Ajax를 사용하여 콘텐츠를 동적으로 로드하는 웹 사이트를 만드는 방법을 안내합니다.

실용 사례

다음 예에서는 PHP와 Ajax를 사용하여 "products.php"라는 페이지에 제품 목록을 동적으로 로드하는 방법을 보여줍니다.

HTML code

<div id="product-container"></div>

<script>
// Ajax 请求函数
function loadProducts() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "get_products.php", true);
    xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var products = JSON.parse(xhr.responseText);
            displayProducts(products);
        }
    };
    xhr.send();
}

// 显示产品函数
function displayProducts(products) {
    var productContainer = document.getElementById("product-container");
    for (var i = 0; i < products.length; i++) {
        var productItem = document.createElement("div");
        productItem.innerHTML = products[i].name + " - $" + products[i].price;
        productContainer.appendChild(productItem);
    }
}

// 加载按钮点击事件
document.getElementById("load-button").addEventListener("click", loadProducts);
</script>

PHP code

<?php
// get_products.php

// 数据库连接
$mysqli = new mysqli("hostname", "username", "password", "database");

// 从数据库查询产品
$query = "SELECT * FROM products";
$result = $mysqli->query($query);

// 将结果转换为 JSON 格式
$products = array();
while ($row = $result->fetch_assoc()) {
    $products[] = $row;
}

echo json_encode($products);
?>

예제 실행

1. HTML 및 PHP 파일을 서버에 저장합니다.
2. "products.php" 페이지를 방문하세요.
3. "로드" 버튼을 클릭하세요.
4. 전체 페이지를 다시 로드하지 않고도 제품 목록이 페이지에 동적으로 로드됩니다.

결론

PHP와 Ajax를 결합하면 다시 로드하지 않고도 콘텐츠를 쉽게 업데이트할 수 있는 동적 대화형 웹 페이지를 만들 수 있습니다. 이는 실시간 데이터, 라이브 채팅 및 정기적으로 업데이트되는 데이터가 필요한 기타 애플리케이션을 표시하는 데 중요합니다.

위 내용은 PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!