javascript - 显示AJAX请求的结果

Question

我已经广泛研究了如何执行以下操作，但我还不够，并且正在努力寻找真正解释 ajax 及其工作原理的资源。

我已通过以下代码将 ajax 请求发送到 php 文件，并使用 mozillas 开发者控制台 中的网络选项卡，我发现它确实获得了响应代码(在 HTML 元素内回显信息)

虽然我可以看到响应，但我不知道如何使用下面的代码(我在查看了有关堆栈溢出的许多类似问题后编译的代码)来显示它。请有人看一下，看看为什么不显示？

<div id='picoutput'></div>
<script>


        $.ajax({
        url: 'resources/listposts.php',
        type: 'post',
        dataType: \"json\",
        data: {
            uname: $('$uname').val(),
        },

          success:function(data) {
            if(data) {   // DO SOMETHING     
                $('#picoutput').html(data).value;
            } else { // DO SOMETHING }
          }
        }
       });


</script>

响应是

<div id='post'><div id='postleft' style='float:left;clear:left;width: 15%;'>
    <div id='profilepic2'>
       <img src='../uploads/default1562925803.jpg' id='profilepic'>
    </div>
    <h4 style='margin-left:10px;margin-top:10px;;color:grey'>Dowayne Breedt<br>Support<br>2016-05-24</h><br>
</div>
<div id='postright'style='width: 82%;float:right; padding:     10px;background-color:white;height:inherit'>
    <h2>...</h2>
    <p>only refresh if extend is off<br />
    </p>
    </div>  
    </div>"

Answer 1

将其放入并查看“数据”对象包含哪些内容。使用 firebug 等检查它然后使用它。

success:function(data) {
       console.log(data);
       $('#picoutput').val(data.id); 

    }