是否可以将 PHP 查询变量传递给 JS,而不在查看源代码中显示它?

我正在尝试创建一个从 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;

}


这适用于我的目的,但它显示了实际网站的 HTML 中的提示(由于 PHP 的原因echo),这是我不想要的。我尝试过 AJAX(本教程中的第 1 点如何将变量和数据从 PHP 传递到 JavaScript?),但输出无法正常工作,并在单击文本时显示 [object HTMLHeadingElement]。数据库元素已正确传输到我也通过回显 PHP 变量进行了检查,结果是正确的。



斯蒂芬大帝
浏览 85回答 1
1回答

跃然一笑

您需要发送一个 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>
打开App,查看更多内容
随时随地看视频慕课网APP