PHP 数据传输到 JavaScript：避免浏览器显示

将 XMLHttpRequest 与 PHP 和 JSON 响应结合使用

此方法使用 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 脚本

这是 PHP 后端脚本 (fetch_data.php)，用于从数据库获取数据并以 JSON 格式返回。

<?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 获取数据以实现更简洁的方法

此版本使用 Fetch API（XMLHttpRequest 的现代替代方案）来异步发送和接收 JSON 数据。

// 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>

后端：用于获取 API 的 PHP 脚本

Fetch API 的 PHP 代码保持不变，因为它仍然在请求时返回 JSON 数据。

<?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() 在 JavaScript 中。
5. 为什么XMLHttpRequest无法返回数据？
6. 当 responseText 财产处理不当。确保 PHP 脚本返回正确的内容类型 (application/json)。
7. 使用 cookie 是传输数据的好方法吗？
8. 由于大小限制和安全问题，通常不建议使用 Cookie 传输大量数据。会议或 AJAX 是更安全的选择。
9. 如何确保 PHP 和 JavaScript 之间的数据传输安全？
10. 使用 CSRF tokens 或者在服务器端验证请求可以帮助保护 PHP 和 JavaScript 之间的数据传输。

关于安全数据处理的最终想法

PHP 和 JavaScript 集成可能具有挑战性，特别是在尝试阻止数据直接显示在浏览器上时。使用 阿贾克斯 确保传输在后台安全进行，对用户隐藏敏感数据。

组合 XMLHttp请求 或者使用 PHP 的现代 Fetch API 允许开发人员高效地获取数据。正确处理 JSON 响应和会话管理是防止意外显示、确保 Web 应用程序最佳安全性的关键。