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

时间:2015-02-04 23:36:38

标签: javascript php html mysql

我正在为课程分配工作,我们必须创建一个动态网站。我们必须用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。

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

1 个答案:

答案 0 :(得分:0)

解决方案可能是声明一个新函数(例如updateElt),它通过为参数url(&#39; php / getinfo.php&#39;)提供调用getOutput,但你还需要设置你的&# 39; ID&#39;参数,以便更新正确的元素。

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