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

时间:2016-12-05 17:29:40

标签: javascript php jquery html node.js

我正在寻找最安全的方式从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次之后它会选择随机数据。它有什么问题?在phpMyAdmin正常工作的情况下,SQL查询似乎很好。

$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);
}

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

出错了

1 个答案:

答案 0 :(得分:0)

将数据放入数组并回显json。

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

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