我正在嘗試創(chuàng)建一個從 MySQL 數(shù)據(jù)庫讀取提示的系統(tǒng)，并在適當?shù)臅r間向用戶顯示它們。然而，當在網(wǎng)頁上查看時，我還沒有設法獲得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;}這適用于我的目的，但它顯示了實際網(wǎng)站的 HTML 中的提示（由于 PHP 的原因echo），這是我不想要的。我嘗試過 AJAX（本教程中的第 1 點如何將變量和數(shù)據(jù)從 PHP 傳遞到 JavaScript？），但輸出無法正常工作，并在單擊文本時顯示 [object HTMLHeadingElement]。數(shù)據(jù)庫元素已正確傳輸?shù)轿乙餐ㄟ^回顯 PHP 變量進行了檢查，結果是正確的。
1 回答
躍然一笑
TA貢獻1826條經(jīng)驗 獲得超6個贊
您需要發(fā)送一個 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 關注
- 98 瀏覽
添加回答
舉報
0/150
提交
取消