Question

我知道这可能很简单，但我无法弄清楚。当我加载页面时，我看到我的文本区域框和按钮的闪光，然后json数据显示在页面上，替换它。为什么其他元素消失了？

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="chat">
            <script type="text/javascript">
            $(function(){
                $.getJSON("process.php?jsoncallback=?", function(data){
                    for (var x = 0; x < data.length; x++) {
                        document.write(data[x].username);
                        document.write(': ');
                        document.write(data[x].comment);
                        document.write('<br/><br/>');
                    }
                });
            });
            </script>
        </div>

        <div id="send">
            <textarea id="send_text"></textarea>
            <button>Send</button>
        </div>


    </div>
</body>
</html>

谢谢！

Answer 1

因为那是document.write所做的。我猜你真的想在某个地方追加你的内容。您可以使用jQuery html或text方法设置元素的内容。

致电document.write时实际发生了什么？ MDN article解释得很好：

写入已经加载但未调用的文档 document.open（）将自动执行document.open调用。

document.open上的页面告诉我们：

如果目标中存在文档，则此方法将其清除

Answer 2

您不应该使用document.write，它会覆盖所有页面内容，并且无论如何都会提供与等效jQuery方法相比的废话性能。使用$ .each来循环JSON结果也会更容易，例如。

<div id="chat"></div>
<script type="text/javascript>
     $(function() {
          $.getJSON("process.php?jsoncallback=?", function(data) {
               $.each(data, function() {
                     $("#chat").append(this.username + ": " + this.comment);
               });
          });
      });
</script>

使用JQuery检索JSON数据后，Html表单元素消失

2 个答案: