如何使用PHP从数据库中提取数据并将其传递给Javascript

How to fetch data from a database using PHP and pass it to Javascript

本文关键字：Javascript 数据 PHP 何使用 数据库 提取      更新时间：2023-09-26

我正在使用HTML、CSS、MySQL和Javascript制作一个网站，允许用户登录并进行测试，测试有40个问题。

下面的Javascript代码是一个倒计时计时器，它包含名为"questions"的变量，40秒后，它将自动传递到下一个问题。

    var i = 0;
var cEl = document.getElementById('countdown');
var qEl = document.getElementById('question');
var questions = [
 
  'Question1 ?',
  'Question2 ?',
  'Question3 ?',
  'Question4 ?'
];
var Countdown = function (time) {
  this.time = time;
  this.observers = [];
};
Countdown.prototype.start = function () {
  setTimeout(function () {
    if (this.time-- > 0) {
      this.updateObservers();
      this.start();
    }
  }.bind(this), 1000);
};
Countdown.prototype.addObserver = function (observer) {
  this.observers.push(observer);
};
Countdown.prototype.updateObservers = function () {
  var i, l = this.observers.length;
  for (i = 0; i < l; i++) {
    this.observers[i](this.time);
  }
};
function printTime (time) {
  cEl.innerHTML = time + 's';
}
function nextQuestion (time) {
  if (time <= 0) run();
}
function run () {
  var c;
  if (i < questions.length) {
    qEl.innerHTML = questions[i++];
    c = new Countdown(40);
    c.addObserver(printTime);
    c.addObserver(nextQuestion);
    printTime(c.time);
    c.start();
  } else {
    document.body.innerHTML = 'Fin du quiz';
  }
}
run();

这是我的"quizz.php"文件的一部分，我希望在其中插入问题：

<!doctype html>
<html>
<head>
  <title>
    Quiz
  </title>
</head>
<body class="no-scroll">
  <div>
    <!-- some code here -->
  </div>
  <!-- some code here -->
  <script src="js/countdown_script.js"></script>
</body>
</html>

目前，问题在以下变量中：

var questions = [
     
      'Question1 ?',
      'Question2 ?',
      'Question3 ?',
      'Question4 ?'
    ];

但我想使用数据库中已经存在的问题及其答案，每个问题都有2到3个可能的答案，我读到我不应该在.js文件中添加php代码，我试图在下面的php代码中添加questions变量，但它不起作用：

<!doctype html>
<html>
<head>
  <title>
    Quiz
  </title>
</head>
<body class="no-scroll">
  <div>
    <!-- some code here -->
  </div>
  <!-- some code here -->
  <script src="js/countdown_script.js"> 
 var questions = [  
  'Question1 ?',
  'Question2 ?',
  'Question3 ?',
  'Question4 ?'
];</script>
</body>
</html>

在我的情况下，最好的方法是什么？考虑到我还是一个初学者，我只知道html、css、一些javascript、php和mysql。

您需要制作一个小型的API。

步骤1。在您的应用程序中创建一个额外的页面，该页面将输出干净的JSON数组，其中包含来自datadrop 的数据

例如：myApiWithQuestions.php

{
questions: {
    question1: {
        "content":"content of the question",
        "possibleAnswers":[
             "something", "another answer"
         ] 
    },
    question2: {
        "content":"content of the question",
        "possibleAnswers":[
             "something", "another answer"
         ] 
    },
}}

步骤2：使用JQuery进行ajax调用，查找您刚刚创建的页面

$(document).ready(){
    $.ajax({
        url: "myApiWithQuestions.php",
    })
    .done(function( data ) {
        //use data as an array, iterate through it and put your questions to the DOM
    });
}
  1. On.done函数继续执行脚本

你在哪里读到不应该用Javascript运行PHP代码？

不管怎样，这其实并不重要：你可以。我一直都这么做。

    <script type="text/javascript" src="js/countdown_script.js"> 
    <script type="text/javascript"><!--
    var questions = [  
    <?php
    //create and run your mysql query
    //loop through your results
    while($row=mysql_fetch_array($results)){
      //print your results in javascript format
      printf("'%s ?''n",$row['question']);
    }
    ?>
    ];
    --></script>
相关文章：