使用ajax时内容被隐藏

时间:2017-03-12 08:39:54

标签: javascript jquery ajax

我使用ajax使用以下代码获取记录。

function loadDatabaseData()
    {
        console.log("loadDatabaseData");
        var oReq = new XMLHttpRequest();
        oReq.open("GET", "http://192.168.80.143:2800/load", true);
        oReq.setRequestHeader("Content-type", "application/json;charset=UTF-8");
        oReq.onreadystatechange = function() {//Call a function when the state changes.
            if(oReq.readyState == 4 && oReq.status == 200) {
                console.log("http response", oReq.response);
                console.log("http responseText", oReq.responseText);
            }
        }
        oReq.send();

    }

在上面的代码中,内容页面会在点击按钮(at)上加载,但此后的任何内容都会消失。我该如何解决这个问题?

3 个答案:

答案 0 :(得分:1)

因为您正在设置对整个div的响应。修复你的HTML

<div id="responsecontainer"></div> 
<div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</div>

因此,您设置了对responsecontainer的回复,其余部分保持不变。

答案 1 :(得分:0)

您尚未在底部的HTML中关闭div

答案 2 :(得分:0)

你只需关闭那个#responsecontainer div。

var response = "my Response";
$("#goButton").on("click", function(){
  $("#responsecontainer").html(response);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>

some text
<button class="go-btn" type="submit" id="goButton">Go</button> 
<div id="responsecontainer"></div>
<br><hr><br>
<h2>PCA Plot Distribution:</h2><br>
</body>
</html>