通过Javascript解析JSON对象（对象列表）并循环遍历？

Question

好的，我知道有些问题，但我不明白是什么。

我从我编写的Web服务中读取了一个Service的ArrayList（使用JSON mediatype）。访问该地址会返回json字符串。

现在我正在尝试制作一个网页来显示这些值，并每3秒钟请求一次以查看页面上的更改。

我该如何解析它或使用它？我已经读了很多，但还是无从下手。

[是否可以将此对象传递到JSP并使用JSTL进行解析、循环和其他操作？那将非常棒！]

这里是js代码：

 <script type="text/javascript">
setInterval(function(){
    $.ajax({ url: "/MyApp/rest/display", success: function(data){
        var objs = $.parseJSON(data);
        $.each(objs, function(i,service) {
            $("#service").append('<p>'+service+'</p>');
        });
    }, dataType: "json"});
}, 3000);
</script>

我有一个 <div id="service">

编辑： 就快完成了！

现在我有这个：

<script type="text/javascript">
setInterval(function(){
    $.ajax({ url: "/myApp/rest/display", success: function(data){
        $.each(data, function(i,service) {
            var cont = 1;
            var newdiv = document.createElement('div');
            newdiv.setAttribute('id', "service"+i);
            $("#service"+i).html('<p>'+service.serviceId+" "+service.queue.lastNumber+'</p>');
            document.getElementById("services").appendChild(newdiv);
            cont++;
        });
    }, dataType: "json"});
}, 5000);
</script>

它可以获取更新（很不错！），但我有一个问题：它不断在大的div中创建新的空div。我如何避免这种情况？ 编辑2： 没事了，我已经解决了！只需在appendChild之前添加此行代码即可：

if(!$("#service"+i).length)

非常好用，谢谢！

- Enrichman

Answer 1

使用JQuery时，您不需要解析data，因为当您设置dataType: "json"时，它已经被解析为JSON格式。

$.ajax({ 
    url: "/MyApp/rest/display", 
    success: function(data) {
        $.each(data, function(i,service) {
            $("#service").append('<p>'+service+'</p>');
        });}, 
    dataType: "json" });

附注：如果这不起作用，请发布由您的AJAX调用返回的JSON。

编辑：以下是JSTL的做法： 创建一个JSF或JSP，它不返回完整的HTML页面，而只返回#service div中所需的内容。我们称该页面为doit.jsp。现在我们可以使用ajax将其放入#service div中。

$.ajax({
    url: "doit.jsp",
    success: function(data) { $("#service").html(data); });

- Daniel Moses

---

哦，天啊！它起作用了！但我有一个问题...脚本每3秒钟就会添加新的div。我该如何更新那些？编辑：稍后我会尝试jsp代码！谢谢！;) - Enrichman

@Enrichman：没问题。如果你想让 $("#service").append('<p>'+service+'</p>'); 替换而不是追加，你应该使用 html 方法 $("#service").html('<p>'+service+'</p>');。 - Daniel Moses

我有一个问题。最后一个服务覆盖了所有的服务。 - Enrichman