我可以在AJAX成功函数中使用while循环进行迭代吗?

时间:2015-06-23 18:58:33

标签: javascript jquery html ajax

我正在尝试动态创建一个手风琴并通过AJAX动态填充每个标签的内容,我的主HTML页面有一个用于手风琴的空div

<div id="accordion"></div>

如果最终目标是为服务器返回的数据填充div,如下所示:

<div id="accordion">
    <p> accordion tab title 1</p>
    <div>
        <ul>
            <li>jon</li>
            <li>jill</li>
            <li>jacob</li>
         </ul>
    </div>

    <p>accordion tab title 2</p>
    <div>
        <ul>
            <li>ben</li>
            <li>brittany</li>
            <li>bob</li>
        </ul>
    </div>

    <p>accordion tab title 3</p>
    <div>
        <ul>
            <li>larry</li>
            <li>laura</li>
            <li>lilly</li>
         </ul>
    </div>
</div>

我是否可以在我的AJAX成功函数中使用while循环来遍历数据并创建列表项?这是我到目前为止的功能:

$(function() {
    var $accordion= $("#accordion");
    $.ajax({

        type:'GET',
        url: "PDOconnect.php",
        dataType: "json",
        success: function(data){
        $.each(data, function(i,data){

            $accordion.append('<p>'+ data.title + '</p>');
            $accordion.append('<div><ul></ul></div>');
            );
        })
        },
        error: function(xhr, textStatus, errorThrown) {
            alert( "Request failed: " + textStatus );
        }
    });// end ajax 
    });
});

1 个答案:

答案 0 :(得分:0)

成功完成ajax调用后,$.ajax的成功回调运行。这意味着您可以通过多种不同方式操作数据。

映射,过滤,简化和简单循环是前端工程师在网页上使用服务器数据的一些常用方法。

你可以在这里放置循环,事实上大多数人将数据加载到列表中。