PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션-PHP 튜토리얼-php.cn

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

WBOY

풀어 주다： 2024-06-06 13:12:56

원래의

1082명이 탐색했습니다.

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

PHP 与 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);
?>

로그인 후 복사

예제 실행