我正在尝试创建一个从 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 变量进行了检查，结果是正确的。
1 回答
跃然一笑
TA贡献1826条经验 获得超6个赞
您需要发送一个 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>
- 1 回答
- 0 关注
- 84 浏览
添加回答
举报
0/150
提交
取消