Question

我正在尝试使用从服务器定期收到的信息更新div。下面的代码将从服务器接收正确的信息，将其附加到div文本，然后重新加载页面/清除div。

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type='text/javascript'>

function exec(command){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = document.getElementById("txtHint").innerHTML + "<br/><br/>" + xmlhttp.responseText;
            alert(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "HAS-sync.php", true);
    xmlhttp.send()
}
</script>
<style type="text/css">
.auto-style1 {
    margin-top: 0px;
}
</style>
</head>

<body>

<table style="width: 100%">
    <tr>
        <td style="width: 141px; height: 390px">Managers<br /> DHTs</td>
        <td name="targetThing" style="height: 390px">
            <form onsubmit="exec()">
                <input class="auto-style1" name="Text1" type="text">
                <input type="submit">
            </form>
            <br />
            <div id="txtHint" style="border:1px solid black;width:50%;height:50%"></div>
        </td>
    </tr>
</table>

</body>

</html>

如何才能将ajax调用的结果附加到div文本而不是将其完全清除？

Answer 1

首先将onsubmit移动到form标签而不是注释中所述的输入。

<form onsubmit="updateTxt(this.value);return false">

您需要附加回复文字，而不是覆盖innerhtml中的内容。

document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;

Answer 2

目前，您正在使用=分配覆盖HTML。您需要使用+=：

附加它

document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;

Answer 3

您需要在return false处理程序中onsubmit，以便浏览器知道您已处理该请求，并且不应该继续。这可以通过以下几种方式完成：

在绑定中return false;之后添加exec()：

<form onsubmit="exec();return false;"><!-- ... --></form>

或者，将您的绑定修改为return exec()并使用方法return false;：

<script>
  function exec(){
    /* ... */
    return false;
  }
</script>
<form onsubmit="return exec()"><!-- ... --></form>

顺便说一下，你应该考虑使用属性来摆脱绑定javascript并开始使用addEventHandler（和类似的）来明确区分关注点。

Answer 4

使用

var txtToUpdate = document.getElementById("txtToUpdate");
txtToUpdate.innerHTML = txtToUpdate.innerHTML + xmlhttp.responseText;

AJAX调用重新加载当前页面

4 个答案: