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

Question

I am working on an assignment for class and we have to create a dynamic website. We have to create all the containers in HTML, then load all out content onto a MySQL DB and then use Javascript to read the PHP file that collects the content from MySQL.

I have managed to get it to pull a list from the DB and display on my site, but now I'm stuck as to how to get it to read other parts of the page and pull them into the html.

Here is the PHP I have so far:

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

Here is my 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;
}

I'm wanting to reuse as much code as possible but for pulling content from the DB without having to have multiple JS and PHP files. And we are under strict orders to not use plugins or Bootstrap.

Any help would be great! Thank you!

Answer 1

A solution could be to declare a new function (ex. updateElt) which calls getOutput by giving it the parameter url ('php/getinfo.php'), but you also need to set your 'id' parameter in order to update the correct element.

So you have to declare an id var in your script (not in a function) and assign it a value in the updateElt. This way the id will have a global scope to your script and you 'll be able to access it in your drawError and drawOutput function.