한국어
한국어
현대 웹 개발에서 검색 기능은 매우 중요한 구성 요소입니다. 사용자 경험을 향상시키기 위해 많은 웹 사이트에서 검색 상자 아래에 몇 가지 검색 제안이 표시되어 사용자가 원하는 정보를 더 빨리 찾을 수 있습니다. 이 기사는 간단한 예제를 사용하여 PHP 및 MySQLI_RESULT 함수를 사용하여 백엔드 검색 제안 인터페이스 함수를 구현하는 방법을 보여줍니다.
먼저 데이터베이스에 연결해야합니다. 다음은 PHP의 MySQLI 확장자를 사용하여 연결하는 코드입니다.
<?php
$host = "localhost";
$username = "root";
$password = "yourpassword";
$database = "yourdatabase";
$conn = new mysqli($host, $username, $password, $database);
// 연결을 확인하십시오
if ($conn->connect_error) {
die("연결이 실패했습니다: " . $conn->connect_error);
}
?>
이 코드는 데이터베이스 서버에 연결하고 후속 쿼리를 수행 할 데이터베이스를 선택합니다.
우리는 사용자가 키워드를 입력 할 수있는 간단한 검색 제안 인터페이스를 만들고 백엔드는 기준을 충족하는 제안 목록을 반환합니다. 이 기능을 구현하는 코드는 다음과 같습니다.
<?php
// 사용자가 입력 한 키워드를 얻습니다
$keyword = isset($_GET['query']) ? $_GET['query'] : '';
// 예방하다 SQL 주입
$keyword = $conn->real_escape_string($keyword);
// 쿼리를 정의합니다 SQL 성명
$sql = "SELECT * FROM products WHERE name LIKE '%$keyword%' LIMIT 5";
// 쿼리를 실행하십시오
$result = $conn->query($sql);
// 쿼리가 성공했는지 여부를 결정하십시오
if ($result->num_rows > 0) {
$suggestions = [];
while ($row = $result->fetch_assoc()) {
$suggestions[] = $row['name'];
}
echo json_encode($suggestions); // 검색 제안 목록으로 돌아갑니다
} else {
echo json_encode([]); // 일치하는 결과가없는 경우，빈 배열을 반환하십시오
}
$conn->close();
?>
위의 코드에서 먼저 $ _get [ 'query'] 를 통해 사용자가 입력 한 쿼리 문자열을 가져온 다음 real_escape_string () 메소드를 사용하여 SQL 주입 공격을 피하십시오. 다음으로 SQL 문을 사용하여 사용자가 입력 한 키워드와 일치하는 데이터베이스의 제품 테이블의 레코드를 쿼리 하고 최대 5 개의 제안을 반환합니다.
mysqli_result 객체는 fetch_assoc () 메소드를 통해 각 행의 결과를 가져 와서 배열 $ 제안 으로 저장합니다. 마지막 으로이 배열을 JSON 형식으로 변환하여 출력하십시오. 프론트 엔드는 Ajax를 통해 검색 제안을 수신하고 표시 할 수 있습니다.
이 백엔드 인터페이스가 Frontend 페이지와 함께 작동하려면 Frontend에서 JavaScript를 사용하여 AJAX를 통해 백엔드에 요청을 보내고 반환 된 데이터를 수신해야합니다. 간단한 프론트 엔드 코드 예는 다음과 같습니다.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제안 사례를 검색하십시오</title>
<style>
#suggestions {
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
}
.suggestion-item {
padding: 8px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="검색 키워드를 입력하십시오..." oninput="getSuggestions()">
<div id="suggestions"></div>
<script>
function getSuggestions() {
var query = document.getElementById('search').value;
if (query.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search_suggestions.php?query=' + query, true);
xhr.onload = function() {
if (xhr.status == 200) {
var suggestions = JSON.parse(xhr.responseText);
displaySuggestions(suggestions);
}
}
xhr.send();
} else {
document.getElementById('suggestions').innerHTML = '';
}
}
function displaySuggestions(suggestions) {
var suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = '';
suggestions.forEach(function(item) {
var div = document.createElement('div');
div.classList.add('suggestion-item');
div.textContent = item;
suggestionsDiv.appendChild(div);
});
}
</script>
</body>
</html>
이 프론트 엔드 코드에서는 입력 상자에서 OnInput 이벤트를 사용합니다. 사용자가 문자를 입력하면 getSuggestions () 함수가 호출되고 요청이 ajax를 통해 search_suggestions.php 로 전송되고 검색 제안이 얻어집니다. 반환 된 제안은 DisplaySuggestions () 함수를 통해 페이지에 표시됩니다.
MySQLI_Result 함수와 결합 된 PHP 및 MySQL을 통해 간단한 백엔드 검색 제안 인터페이스 기능을 성공적으로 구현했습니다. 사용자가 키워드를 입력하면 백엔드는 데이터베이스의 데이터를 기반으로 관련 제안을 반환하는 반면 Frontend는 AJAX를 통해 이러한 제안을 동적으로 표시합니다. 이 예제는 MySQLI_RESULT를 사용하여 데이터베이스에서 데이터를 효율적으로 가져 와서 프론트 엔드로 반환하는 방법을 보여줍니다.
