JavaScript로 PHP 데이터 전달: 브라우저 표시 방지

PHP 및 JSON 응답과 함께 XMLHttpRequest 사용

이 방법은 PHP를 사용하여 데이터베이스에서 데이터를 가져오고 JavaScript의 XMLHttpRequest를 통해 JSON으로 반환합니다. JSON 데이터는 브라우저에 표시되지 않고 JavaScript로 처리됩니다.

// Frontend: HTML + JavaScript code
<button id="fetchDataBtn">Fetch Data</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_data.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data); // Data is available here, not visible to the user
      }
    };
    xhr.send('request=true');
  });
</script>

백엔드: JSON 데이터를 보내는 PHP 스크립트

이는 데이터베이스에서 데이터를 가져와 JSON 형식으로 반환하는 PHP 백엔드 스크립트(fetch_data.php)입니다.

<?php
// Backend: PHP + MySQL code
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  // Example: Fetch data from database
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

보다 깔끔한 접근 방식을 위해 Fetch API를 사용하여 데이터 가져오기

이 버전은 JSON 데이터를 비동기적으로 보내고 받기 위해 XMLHttpRequest의 최신 대안인 Fetch API를 사용합니다.

// Frontend: HTML + JavaScript code using Fetch API
<button id="fetchDataBtn">Fetch Data with Fetch API</button>
<script>
  document.getElementById('fetchDataBtn').addEventListener('click', function() {
    fetch('fetch_data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'request=true'
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
</script>

백엔드: Fetch API용 PHP 스크립트

요청 시 JSON 데이터를 반환하므로 PHP 코드는 Fetch API와 동일하게 유지됩니다.

<?php
// Backend: PHP + MySQL code (same as previous example)
if (isset($_POST['request']) && $_POST['request'] == 'true') {
  $conn = new mysqli('localhost', 'root', '', 'testdb');
  if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);
  }
  $sql = "SELECT * FROM users LIMIT 1";
  $result = $conn->query($sql);
  if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode($row);
  } else {
    echo json_encode(['error' => 'No data found']);
  }
  $conn->close();
}
?>

PHP에서 JavaScript로의 데이터 처리에 관한 일반적인 질문

1. 브라우저에 데이터가 표시되지 않도록 하는 가장 좋은 방법은 무엇입니까?
2. 사용 AJAX PHP에서 JavaScript로 데이터를 전송하면 데이터가 페이지에 표시되지 않고 백그라운드에서 처리됩니다.
3. JSON을 사용하여 PHP에서 JavaScript로 데이터를 보내려면 어떻게 해야 합니까?
4. 그만큼 json_encode() PHP의 함수는 데이터를 다음을 사용하여 구문 분석할 수 있는 JSON 형식으로 변환합니다. JSON.parse() 자바스크립트에서.
5. XMLHttpRequest가 데이터를 반환하지 못하는 이유는 무엇입니까?
6. 이런 일은 다음과 같은 경우에 자주 발생합니다. responseText 속성이 올바르게 처리되지 않습니다. PHP 스크립트가 올바른 콘텐츠 유형(application/json)을 반환하는지 확인하세요.
7. 쿠키를 사용하는 것이 데이터를 전송하는 좋은 방법입니까?
8. 일반적으로 쿠키는 크기 제한 및 보안 문제로 인해 대량의 데이터를 전송하는 데 권장되지 않습니다. 세션 또는 AJAX 더 안전한 옵션이 있습니다.
9. PHP와 JavaScript 간의 데이터 전송을 보호하려면 어떻게 해야 합니까?
10. 사용 CSRF tokens 또는 서버 측에서 요청을 검증하면 PHP와 JavaScript 간의 데이터 전송을 보호하는 데 도움이 될 수 있습니다.

안전한 데이터 처리에 대한 최종 생각

PHP와 JavaScript 통합은 어려울 수 있으며, 특히 데이터가 브라우저에 직접 표시되는 것을 방지하려고 할 때 더욱 그렇습니다. 사용 아약스 중요한 데이터를 사용자에게 숨기면서 전송이 백그라운드에서 안전하게 이루어지도록 보장합니다.

결합 XMLHttp요청 또는 PHP를 사용한 최신 Fetch API를 사용하면 개발자가 데이터를 효율적으로 가져올 수 있습니다. JSON 응답 및 세션 관리를 올바르게 처리하는 것은 의도하지 않은 표시를 방지하고 웹 애플리케이션에서 최적의 보안을 보장하는 데 중요합니다.