首页  >  问答  >  正文

javascript - console.log()得到的数据,如何输出到页面中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function get_msg(){
            //ajax请求接受,js做处理
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    // alert(typeof xhr.responseText);//
                    eval("var people="+xhr.responseText);
                    console.log(people);
                    document.getElementById('res').innerHTML = eval;
                }
            }
            xhr.open('get','./3.php');
            xhr.send(null);
        }
        //把string变为object对象
        //eval() 字符串参数->表达式 来运行
    </script>
</head>
<body>
    <h2>接受信息 并 读取</h2>
    <input type="button" value="获取" onclick="get_msg()">
    <p id="res"></p>
</body>
</html>

我是想在页面中添加一个p,把内容输出在这个里,但是我这么写好像不对。怎么样才能给console.log添加一个ID呢?或者怎么把console.log的内容输出到p中呢?

为情所困为情所困2710 天前3432

全部回复(5)我来回复

  • 天蓬老师

    天蓬老师2017-05-19 10:48:01

    • 本身这个命题就有点问题。console.log()的作用就是用于代码调试的,是控制台输出,这个方法的目的就是对于你不想显示在页面的内容,显示在控制台中,方便代码调试。如果要在页面中输出,有很多方法啊,Element.innnerHTML、Element.text()都是不错的选择啊,再不济还有暴力的document.write()方法,为什么还要那么麻烦的找到console的内容,然后输出到页面呢?换句话说,只要你能console的内容,都可以用document.write()到页面上

    • 题主的代码不过是做了一个ajax,eval是几个意思啊?xhr.send(null)又是几个意思啊?更何况即使是xhr.readyState==4:true,这也只是代表后台接收到数据了,但是有没有给你返回数据,你是不是也要判断一下啊?

    • 题主的如果做原生的ajax,那就最好注意状态码的控制,处理好业务逻辑。如果采用jquery或者angular,将会是更不错的选择

    回复
    0
  • 漂亮男人

    漂亮男人2017-05-19 10:48:01

    console.log打印的是people的内容,那么你innerHTML的内容就是people啊,你写个eval是几个意思啊

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:48:01

    直接var people 然后赋值,再把people加到相应的位置不就好了。eval不要瞎用。

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:48:01

    eval这个函数慎用。直接把你需要打印的内容放到一个变量里面。然后innerhtml或者innertext

    回复
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:48:01

    输出到页面 innerText 或者 innerHTML 都行

    回复
    0
  • 取消回复