PHP 및 jQuery를 사용하여 Ajax 애플리케이션 만들기-PHP 튜토리얼-php.cn

PHP 및 jQuery를 사용하여 Ajax 애플리케이션 만들기

WBOY

풀어 주다： 2023-05-11 15:24:01

원래의

600명이 탐색했습니다.

웹 애플리케이션의 지속적인 개발로 인해 Ajax는 페이지 새로 고침 없이 서버와 통신할 수 있는 강력한 도구가 되었습니다. Ajax를 사용하면 웹 애플리케이션의 성능과 유용성을 향상하고 사용자 경험을 향상시킬 수 있습니다.

이 글에서는 PHP와 jQuery를 사용하여 Ajax 애플리케이션을 만드는 방법을 소개합니다. Ajax 기술을 사용하여 사용자가 키워드를 입력하고 이를 서버로 보낼 수 있는 간단한 쿼리 페이지를 만들어 보겠습니다. 서버는 데이터베이스를 검색하고 관련 결과를 반환하며, 이는 다시 로드하지 않고도 웹 페이지에 동적으로 표시됩니다.

시작하기 전에 PHP와 jQuery를 설치했는지 확인하세요. PHP를 사용하여 쿼리 요청을 처리하고 jQuery를 사용하여 Ajax 요청을 보내고 반환된 결과를 처리합니다.

1단계: HTML 파일 만들기

먼저 쿼리 페이지로 사용할 HTML 파일을 만들어야 합니다. 다음은 텍스트 상자와 버튼이 포함된 기본 HTML 파일 템플릿입니다.

<!DOCTYPE html>
<html>
<head>
  <title>Ajax Search</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    //Ajax代码将放在这里
  </script>
</head>
<body>
  <h1>Ajax Search</h1>
  <input type="text" id="keyword" name="keyword" placeholder="Enter Keyword">
  <button id="search">Search</button>

  <div id="results">
    <!-- 结果将在这里动态显示 -->
  </div>

</body>
</html>

로그인 후 복사

2단계: PHP 파일 만들기

다음으로 쿼리 요청을 처리하기 위한 PHP 파일을 만들어야 합니다. 다음은 쿼리 요청을 처리하는 샘플 코드입니다.

<?php
//连接到数据库
$db = mysqli_connect('localhost', 'username', 'password', 'database_name');

//检查连接是否成功
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}

//从查询字符串中获取关键字
$keyword = $_GET['keyword'];

//构建查询
$sql = "SELECT * FROM products WHERE name LIKE '%".$keyword."%'";
$result = mysqli_query($db, $sql);

//检查查询是否成功
if (!$result) {
  echo 'Could not run query: ' . mysqli_error($db);
  exit();
}

//将结果转换为JSON格式并输出
$rows = array();
while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}
echo json_encode($rows);

//关闭连接
mysqli_close($db);
?>

로그인 후 복사

이 코드는 키워드가 포함된 제품을 쿼리하고 결과를 JSON 형식으로 변환합니다. 다음으로 jQuery를 사용하여 Ajax 요청을 보내고 반환된 결과를 처리하겠습니다.

3단계: Ajax 코드 작성

이제 위 코드를 결합하여 완전한 Ajax 애플리케이션을 만들 수 있습니다. 다음은 jQuery 코드입니다.

$(document).ready(function() {
    $('#search').click(function() {
        var keyword = $('#keyword').val();
    
        // 发送Ajax请求
        $.ajax({
            url: 'search.php',
            dataType: 'json',
            data: {
                keyword: keyword
            },
            success: function(data) {
                // 处理返回的结果
                var results = '';
                $.each(data, function(index, value) {
                    results += '<div>';
                    results += '<h3>' + value['name'] + '</h3>';
                    results += '<p>' + value['description'] + '</p>';
                    results += '<p>Price: ' + value['price'] + '</p>';
                    results += '</div>';
                });
    
                $('#results').html(results);
            },
            error: function(jqxhr, textStatus, error) {
                // 处理错误
                var err = textStatus + ", " + error;
                console.log( "Request Failed: " + err );
            }
        });
    });
});

로그인 후 복사

이 코드에는 사용자가 검색 버튼을 클릭하고 Ajax를 사용하여 요청을 보낼 때 키워드를 가져오는 클릭 이벤트가 포함되어 있습니다. 요청은 search.php 파일로 전송되며, 이 파일은 데이터베이스를 쿼리하고 결과를 JSON 형식으로 반환합니다. 결과가 성공적으로 수신되면 jQuery를 사용하여 결과의 HTML을 동적으로 생성하고 페이지에 표시합니다.

우리는 정기적으로 jQuery의 $.ajax 메소드를 사용하여 비동기 요청을 처리합니다. 이를 통해 많은 고급 제어 기능을 제공하고 모든 유형의 데이터를 매우 쉬운 방법으로 처리할 수 있습니다.

여기서 주목해야 할 것은 jQuery에서 ajax의 성공 및 오류 콜백 함수입니다. 성공은 성공적인 콜백을 나타내고 오류는 예외 콜백을 나타냅니다. 따라서 서버가 데이터를 성공적으로 반환하면 해당 데이터는 성공 콜백 함수로 전달되고 비즈니스 로직 코드는 반환된 데이터를 처리합니다. 예를 들어 서버가 무차별 공격을 받아 403 상태 코드를 반환하는 등 요청에서 예외가 발생하면 우리 코드는 오류 콜백 함수에서 예외를 수신하고 사용자에게 예외 정보를 표시하는 등 관련 처리를 수행합니다.

4단계: 애플리케이션 테스트

이제 애플리케이션을 테스트할 수 있습니다. HTML 파일을 열고 키워드를 입력한 후 검색 버튼을 클릭하세요. 다시 로드하지 않고도 관련 결과가 페이지에 동적으로 나타나는 것을 볼 수 있습니다.

문제가 발생하면 콘솔 로그에서 오류 메시지를 확인하거나 PHP 코드를 보고 올바르게 작동하는지 확인할 수 있습니다.

결론

PHP와 jQuery를 사용하면 강력한 Ajax 애플리케이션을 쉽게 만들 수 있습니다. Ajax는 웹 애플리케이션을 더 빠르고 응답성이 뛰어나게 만들어 사용자 경험을 향상시킵니다. 이제 PHP와 jQuery를 활용하여 자신만의 Ajax 애플리케이션을 만들고 웹 애플리케이션의 성능과 유용성을 향상시킬 수 있습니다.

위 내용은 PHP 및 jQuery를 사용하여 Ajax 애플리케이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!