javascript - 使用 Javascript 调用从 MySQL DB 读取网站内容的 PHP 文件

Question

我正在做类作业，我们必须创建一个动态网站。我们必须在 HTML 中创建所有容器，然后将所有内容加载到 MySQL 数据库中，然后使用 Javascript 读取从 MySQL 收集内容的 PHP 文件。

我已经设法让它从数据库中提取列表并显示在我的网站上，但现在我不知道如何让它读取页面的其他部分并将它们提取到 html 中。

这是我目前拥有的 PHP:

    $con=mysqli_connect("localhost","Username","password",'DBname');

if (mysqli_connect_errno()){
    die("Error: "  . mysqli_connect_error());
}

$result = mysqli_query($con,"SELECT * FROM HomeList");

echo "<ul>";

while($row = mysqli_fetch_array($result)){
        echo "<li>".$row['ListItem']."</li>";
    }
    echo "</ul>";

    mysqli_close($conn);
?>

这是我的 Javascript:

    function getOutput() {
  getRequest(
      'php/getinfo.php', 
       drawOutput,
       drawError
  );
  return false;
}

// handles drawing an error message
function drawError () {
    var container = document.getElementById('id');
    container.innerHTML = 'Error has occurred';
}

// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById('id');
    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;
}

我想重用尽可能多的代码，但是为了从数据库中提取内容而不必拥有多个 JS 和 PHP 文件。我们严格遵守命令，不得使用插件或 Bootstrap。

任何帮助都会很棒!谢谢!

Answer 1

一个解决方案可能是声明一个新函数(例如 updateElt)，它通过给它参数 url('php/getinfo.php')来调用 getOutput，但是你还需要设置你的 'id' 参数以便更新正确的元素。

因此您必须在脚本中(而不是在函数中)声明一个 id var，并在 updateElt 中为其分配一个值。这样，该 id 将在您的脚本中具有全局范围，您将能够在 drawError 和 drawOutput 函数中访问它。