1

所以这可能很简单，但我无法弄清楚。

我有一个 PHP 数组，我正在转换为一个 json 数组，我需要使用 jquesry 将 json 数组发布到 html div 作为 ul。

    <?php
// Create a Catalog
$catalog = array(
    'categories' => array(
        array(
            'name'          => 'Category 1',
            'categories'    => array(
                array(
                    'name'          => 'Category 1 Sub 1',
                    'products'      => array()
                ),
                array(
                    'name'          => 'Category 1 Sub 2',
                    'categories'    => array(
                        array(
                            'name'      => 'Category 1 Sub 2 Sub 1',
                            'products'  => array()
                        ),
                        array(
                            'name'      => 'Category 1 Sub 2 Sub 2',
                            'products'  => array()
                        ),
                        array(
                            'name'      => 'Category 1 Sub 2 Sub 3',
                            'products'  => array()
                        ),
                    )
                ),
                array(
                    'name'          => 'Category 1 Sub 3',
                    'products'      => array()
                ),
            )
        ),
        array(
            'name'          => 'Category 2',
            'products'      => array()
        ),
        array(
            'name'          => 'Category 3',
            'categories'    => array(
                array(
                    'name'      => 'Category 3 Sub 1',
                    'products'  => array()
                ),
                array(
                    'name'      => 'Category 3 Sub 2',
                    'products'  => array()
                ),
                array(
                    'name'      => 'Category 3 Sub 3',
                    'products'  => array()
                ),
            )
        ),
    ),
);

echo json_encode($catalog);?>

我需要将 json 数组发布到 #categories 内的 html ul 中

    <html>
<head>
    <title>Testing</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

</head>
<body>
    <h1>Catalog</h1>
    <ul id="categories">
        <li>No Categories</li>
    </ul>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/script.js"></script>
</body>

这是我的 jquery 的开始

    $.ajax({
url : '/catalog.php',
dataType : 'json',
success : function(data) {
    $('#categories li').remove();
    $('#categories').append('<li>' + data.categories[0].name + '</li>');
    $('#categories').append('<li>' + data.categories[1].name + '</li>');
    $('#categories').append('<li>' + data.categories[2].name + '</li>');
}

});

我只是被困在让数组发布到 ul 中，我真的不知道从这里去哪里。任何帮助，将不胜感激。谢谢你。

4

1 回答 1

0

好吧，您的方向是正确的，但我会使用递归函数来动态获取所有内容。

<script type="text/javascript">

function generate_subcategories(categories)
{
    var ul_html_data = '<ul>';

    for (var i = 0; i < categories.length; i++)
    {
        ul_html_data += '<li>' + categories[i].name + '</li>';

        if (categories[i].categories)
        {
            ul_html_data += generate_subcategories(categories[i].categories);
        }

    }

    ul_html_data += '</ul>';

    return ul_html_data;
}

$.ajax(
    {
        url : 'catalog.php',
        dataType : 'json',
        success : function(data)
        {
            var list_html_data = '';

            for (var i = 0; i < data.categories.length; i++)
            {
                list_html_data += '<li>' + data.categories[i].name + '</li>';

                if (data.categories[i].categories)
                {
                    list_html_data += generate_subcategories(data.categories[i].categories);
                }
            }

            $('#categories').html(list_html_data);
        }
    }
);
</script>
于 2013-09-13T01:22:23.977 回答