javascript - 用ajax和json动态添加元素破坏页面布局

Question

我有一个使用 jquery mobile 构建的页面。如果我用静态代码填充列表:

    <script>
document.write('<ul data-role="listview">');


document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');
document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');             



document.write('</ul>');

</script>

我得到这个结果:image

现在，我尝试动态地执行此操作，使用 ajax 和 json 从数据库中读取。 这是代码:

<script>
document.write('<ul data-role="listview">');
    $.ajax({
        url: 'db_to_app_prod.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 

document.write('<li data-icon="false"><a href="#" id="mortadella"><img src="images/app/prod.jpg"><h2>Sisa</h2><p class="wrap">mortadella affettatagr.120</p><span class="ui-li-count">2,70 €</span></a></li>');

            }); 

        },
        error: function(){
           output.text('There was an error loading the data.');
        }
    });


document.write('</ul>');
</script>

这就是结果:image 正如你所看到的，布局现在完全被破坏了。会发生什么？为什么？我该如何解决这个问题以获得动态的第一个结果？

编辑: 这是我所做的另一次尝试:

$(document).ready(function(){
    $(document).bind('deviceready', function(){
        //Phonegap ready
        onDeviceReady();
    });


    //var output = document.getElementById("output");
    var _ul = document.createElement('ul');

    _ul.setAttribute("data-role", "listview");


    $.ajax({
        url: 'db_to_app_prod.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 

                var _li =  document.createElement('li');
                _li.setAttribute("data-icon", "false");
                _li.innerHTML = '<li data-icon="false">'+
                '<a href="" id="'+item.id+'">'+
                '<img src="http://gestisciapp.it/gruppodipalo/images/'+item.img+'">'+
                '<h2>'+item.marca+'</h2>'+
                '<p class="wrap">'+item.descrizione+'</p>'+
                '<span class="ui-li-count">'+item.prezzo+' €</span>'+
                '</a></li>';    

                _ul.appendChild(_li);

            }); 

        },
        error: function(){
           output.text('There was an error loading the data.');
        }
    });
    document.getElementById("output").appendChild(_ul);

});

Answer 1

类似这样的事情:

    .....
    success: function(data, status){
        var _ul = $('<ul />').attr('data-role','listview');
        $.each(data, function(i,item){ 

            $('<li data-icon="false" />')
               .append($('<a href="" id="'+item.id+'" />')
                 .append('<img src="http://gestisciapp.it/gruppodipalo/images/'+item.img+'" />')
                 .append('<h2>'+item.marca+'</h2>')
                 .append('<p class="wrap">'+item.descrizione+'</p>')
                 .append('<span class="ui-li-count">'+item.prezzo+' €</span>')
                )//$('<a />')
            //)//$('<li />') no need sorry
            .appendTo(_ul);   
        });
        $('#output').empty().append(_ul);
    },
....

此外，dataType:'json' 而不是 jsonp。请参阅http://api.jquery.com/jquery.ajax/规范

更新

完整的工作代码。适用于您的示例 json。

        $.ajax('tony.js?id=' + Math.random(), //fake json which match your structure
            {
                dataType: "json",
                jsonp: "jsoncallback",
                method: 'get',
                contentType: 'application/json',
                success: function (data, status) {
                    var _ul = $('<ul />').attr('data-role', 'listview');
                    $.each(data, function (i, item) {
                        $('<li data-icon="false" />')
                           .append($('<a href="" id="' + item.id + '" />')
                             .append('<img src="http://gestisciapp.it/gruppodipalo/images/' + item.img + '" />')
                             .append('<h2>' + item.marca + '</h2>')
                             .append('<p class="wrap">' + item.descrizione + '</p>')
                             .append('<span class="ui-li-count">' + item.prezzo + ' €</span>')
                            )//$('<a />')
                        .appendTo(_ul);
                    });
                    $('#output').empty().append(_ul);
                },
                error: function (xhr, d, s) {
                    $('#output').empty().html(s);
                }
            });

完整工作示例

在 Google 移动模拟器工具中进行测试。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script type="text/javascript">
        function getData() {
            $.ajax('tony.js?id=' + Math.random(), //fake json which match your structure
                {
                    dataType: "json",
                    jsonp: "jsoncallback",
                    method: 'get',
                    contentType: 'application/json',
                    success: function (data, status) {
                        var _ul = $('<ul />').attr('data-role', 'listview');
                        $.each(data, function (i, item) {
                            $('<li data-icon="false" />')
                               .append($('<a href="" id="' + item.id + '" />')
                                 .append('<img src="http://gestisciapp.it/gruppodipalo/images/' + item.img + '" />')
                                 .append('<h2>' + item.marca + '</h2>')
                                 .append('<p class="wrap">' + item.descrizione + '</p>')
                                 .append('<span class="ui-li-count">' + item.prezzo + ' €</span>')
                                )//$('<a />')
                            .appendTo(_ul);
                        });
                        $('#output').empty().append(_ul).enhanceWithin();//.listview();
                    },
                    error: function (xhr, d, s) {
                        $('#output').empty().html(s);
                    }
                });
        }
    </script>
</head>
<body>
    <button onclick="getData()">Get Data</button>
    <div id="output"></div>
</body>
</html>