如何从 Javascript 调用 PHP 文件并将数据从 PHP 返回到 Javascript

Question

我正在寻找最安全的方法来从 Javascript 调用 PHP 文件，然后将数据从 PHP 返回到 Javascript。

我正在开发 Javascript 游戏。我需要调用 PHP 文件来连接数据库并从数据库中选择一些数据。此数据应传递给 Javascript。

我在这里查看了 Chris Baker 的答案：Call php function from javascript

javascript

 // handles the click event for link 1, sends the query
 function getOutput() {
   getRequest(
       'myAjax.php', // URL for the PHP file
        drawOutput,  // handle successful request
        drawError    // handle error
   );
   return false;
 }  
 // handles drawing an error message
 function drawError() {
     var container = document.getElementById('output');
     container.innerHTML = 'Bummer: there was an error!';
 }
 // handles the response, adds the html
 function drawOutput(responseText) {
     var container = document.getElementById('output');
     container.innerHTML = responseText;
 }
 // helper function for cross-browser request object
 function getRequest(url, success, error) {
     var req = false;
     try{
         // most browsers
         req = new XMLHttpRequest();
     } catch (e){
         // IE
         try{
             req = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
             // try an older version
             try{
                 req = new ActiveXObject("Microsoft.XMLHTTP");
             } catch(e) {
                 return false;
             }
         }
     }
     if (!req) return false;
     if (typeof success != 'function') success = function () {};
     if (typeof error!= 'function') error = function () {};
     req.onreadystatechange = function(){
         if(req.readyState == 4) {
             return req.status === 200 ? 
                 success(req.responseText) : error(req.status);
         }
     }
     req.open("GET", url, true);
     req.send(null);
     return req;
 }

HTML

 <a href="#" onclick="return getOutput();"> test </a>
 <div id="output">waiting for action</div>

PHP

 // file myAjax.php
 <?php
   echo 'hello world!';
 ?>

但我需要检索总共 4 个变量：1 个问题和 3 个答案，根据 Chris 的回答它只获取 1 个回声。

我的 PHP 文件是这样的：

//some code
$questions->bind_result($question, $answer1, $answer2, $answer3);

while ($questions->fetch()) {
    echo $question;  
    echo $answer1;
    echo $answer2;
    echo $answer3;
}

我的 HTML + Javascript 文件：

<div class="question-area">

</div>
<div class="answers">
     <input type="button" class="btn" value="return getSuccessOutput();">   

     <input type="button" class="btn" value="return getSuccessOutput();">   

     <input type="button" class="btn" value="return getSuccessOutput();">   
     <span id="output" class="output"></span>
</div>

我需要将$question 变量传递给.question-area 和$answer1、$answer2、$answer3 到按钮的值。你能帮我实现它吗？

更新

这是我的connect.php，当我尝试刷新 www.mywebsite/connect.php 时，它大多数时候什么都不返回（空白页），刷新 ~10 次后它会选择随机数据。它有什么问题？ SQL 查询似乎不错，在 phpMyAdmin 中工作正常。

$questions = $con->prepare("
    SELECT Question, Answer1, Answer2, Answer3
    FROM Questions AS q
    ORDER BY RAND()
    LIMIT 1
"); 
$questions->execute();

$questions->bind_result($question, $answer1, $answer2, $answer3);

while ($questions->fetch()) {
    $qa = array('question' => $question, 'a1' => $answer1, 'a2' => $answer2, 'a3' => $answer3);
    echo json_encode($qa);
}

如果我在 while 循环中传递var_dump($qa); 它总是返回数据。 echo json_encode($qa)有问题

Answer 1

将您的数据放入一个数组并回显 json。

$qa = array('question' => $question, 'a1' => $answer1, 'a2' => $answer2, 'a3' => $answer3);
echo json_encode($qa);

现在在您的 JS 中，您将可以访问具有相同键的对象。