使用Javascript调用从MySQL数据库读取网站内容的PHP文件


Use Javascript to call PHP file that reads website content from MySQL DB

我正在为班级做作业,我们必须创建一个动态网站。我们必须用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。

任何帮助都会很棒!非常感谢。

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

因此,您必须在脚本中(而不是在函数中)声明一个id var,并在updateElt中为其赋值。通过这种方式,id将具有脚本的全局作用域,并且您可以在drawError和drawOutput函数中访问它。