时间戳

首页 > 解决方案 > 是否可以将 PHP 查询变量传递给 JS 而不在 View Source 中显示它？

javascript - 是否可以将 PHP 查询变量传递给 JS 而不在 View Source 中显示它？

问题描述

我正在尝试创建一个从 MySQL 数据库读取提示的系统，并在适当的时间将它们显示给用户。VARCHAR但是，当在网页上查看时，我还没有设法获得要显示的 JS 变量的提示 ( )，而不会将它们暴露在 HTML 中。这是我的代码：

<?php 
  require_once ('config.php');    <!-- This connects to the database, all details are in the config.php -->

  $result = $link->query ('SELECT `hint1`, `hint2`, `hint3`, `hint4`, `hint5`, `hint6`, `hint7` FROM `hints` WHERE `questNo` = 1');
  while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $hint1 = $row['hint1'];
    $hint2 = $row['hint2'];
    $hint3 = $row['hint3'];
    $hint4 = $row['hint4'];
    $hint5 = $row['hint5'];
    $hint6 = $row['hint6'];
    $hint7 = $row['hint7'];
}
?> 

<!DOCTYPE html>
<html>
    <head>
        <title>Help</title>
    </head>
    <body> 
    <!-- Start Hell -->
    
    <div id="dom-target" style="display: none;">
      <?php
          echo htmlspecialchars($hint1);
      ?>
    </div>
    <script>
      var div = document.getElementById("dom-target");
      var hint1 = div.textContent;
    </script>

   (This would be repeated for all hints)

--------------------------------    
       (UNIMPORTANT HTML)
--------------------------------
        <h2 style="text-decoration: underline;"> Hints<br></h2>
        <br>
        <h2 onclick="displayHint()" id="hint1">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint2">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint3">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint4">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint5">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint6">Click for hint</h2>
        <br>
        <h2 onclick="displayHint()" id="hint7">Click for hint</h2>
        <br>
<script>
function displayHint() {
  document.getElementById("hint1").innerHTML = hint1;
}
</script>
<style>
(Styling Elements)
</style>

    </body>
</html>

这适用于我的目的，但它显示了实际网站的 HTML 中的提示（由于 PHP 的原因echo），这是我不想要的。我尝试了 AJAX（本教程中的第 1 点How do I pass variables and data from PHP to JavaScript?，但输出无法正常工作，并在单击文本时显示 [object HTMLHeadingElement]。数据库元素已正确传输同样，正如我通过回显 PHP 变量检查的那样，它们是正确的。

任何帮助将不胜感激，谢谢：P

标签： javascriptphphtml

解决方案

您需要发送一个 AJAX 请求，您需要确保它responseType是text（这是默认设置，顺便说一句）并this.responseText在onreadystatechange回调中使用，如下例所示：

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str) {
  if (str.length == 0) {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    }
    xmlhttp.open("GET", "gethint.php?q="+str, true);
    xmlhttp.send();
  }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form action="">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

来源：https ://www.w3schools.com/php/showphp.php?filename=demo_ajax_php

推荐阅读