在同一个Web html页面中获得结果

时间:2015-09-12 10:36:13

标签: javascript php html ajax

我已经没有想法来执行我的html / php网页了。

以下是该方案:

从body部分的html网页上加载一个php脚本,它从mysql db中检索数据,然后在表格中返回,然后在初始网页的部分中返回。 当我得到这个表时,在Id(第一列)上有一个链接,通过点击它可以在同一页面上的另一个部分给出信息,但它没有。 它在另一个网页上显示了信息。

这是主要的HTML代码:

<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/w3css/w3.css">
<head>
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#section {
    width:100%;
    float:left;
    padding:5px;         
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;    
    text-shadow: 1px 1px;   
}
</style>
<script>
function getStudentStatus(Id) {
    if (Id == "") {
        document.getElementById("StuStat").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("StuStat").innerHTML = xmlhttp.responseText;
            }
        }
        console.log("looking for :"+Id);
        xmlhttp.open("GET","getStudentStatus.php?StudentId="+Id,true);
        xmlhttp.send();
    }
}
function getStudentInfo(Id) {
    if (Id == "") {
        document.getElementById("StuInfo").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("StuInfo").innerHTML = xmlhttp.responseText;
            }
        }
        console.log("looking for :"+Id);
        xmlhttp.open("GET","getStuInfo.php?StudentId="+Id,true);
        xmlhttp.send();
    }
}

var intShowResult = setInterval(function() {getStudentStatus("q") },60000);

</script>
</head>
<body onload="getStudentStatus('q')">

<div class="w3-container w3-orange">
  <h1>Student Status</h1> 
  <h4>test bed</h4>
</div>
<br><br><br>

<div id="section">
<p>Result: <span id="StuStat"></span></p>
</div>

<div id="footer">
Copyright © xxxxxx.com
</div>



<div id="StuInfo">
<p>Cycle Info of:<span id="StuInfo"></span></p>
</div>


</body>
</html>

有什么想法吗? / koul

1 个答案:

答案 0 :(得分:0)

尝试从正文标记中删除onload="getStudentStatus('q')",注释掉var intShowResult = setInterval(function() {getStudentStatus("q") },60000); 并尝试在最后将此添加到您的JavaScript中。

第一次调用getStudentStatus发生在页面加载完成之前,如果它确实成功执行,则html中没有容器元素接受响应。在调用函数之前,请确保页面内容已完全加载。

function initialise(){
    call getStudentStatus(this,'q');
    setInterval( function() { getStudentStatus('q') }, 60000 );
}

document.addEventListener('DOMContentLoaded',initialise,false);