javascript - 在 HTML 中分配 XML-AJAX 响应

Question

我有一个页面，其中的数据是从 xml 中提取的。一切正常，但我无法在 HTML 中分配回复。

XML:

<XML>
<script id="tinyhippos-injected"/>
<sales>
<sales_list>
<id>123</id>
<outlet_name>vividham</outlet_name>
<sales_date>2015-05-22</sales_date>
<sales_time>20:45:00</sales_time>
</sales_list>
</sales>
</XML>

以下是我的js。 -

var sales_date = $('#sales_date').val();

$.ajax({
            type: "GET",
            url:'http://www.xyz.co/AppData/sales_list.php',
            cache: false,
            dataType: "xml",
            success: function(xml) {

                 var items = $(xml).find('sales_list').filter(function(){
                        return $('sales_date', this).text() == sales_date;
                     });

                items.each(function(index, sales_list){
                    var id = $(this).find('id').text();
                    var outlet_name = $(this).find('outlet_name').text();
                    var sales_time = $(this).find('sales_time').text();

                    // I am not able to assign data to html from here.                              

                });
            }


  });

HTML:-

<div class="list-block" id="sales_content">
    <ul>
        <li class="item-content" id="sales_list">
            <div class="item-media">here I need time</div>
                <div class="item-inner">
                    <div class="item-title">Here I need outlet_name</div>
            </div>
        </li>                           
    </ul>
</div>

div与 sales_content 将刷新按钮点击刷新内部 <ul>内容。我怎样才能实现这个目标？

Answer 1

在这种情况下，您需要创建动态 html。删除内部的 ul 和 li 并使它们像下面一样动态

HTML

<div class="list-block" id="sales_content"></div>  

JS

var sales_date = $('#sales_date').val();
$.ajax({
    type: "GET",
    url: 'http://www.xyz.co/AppData/sales_list.php',
    cache: false,
    dataType: "xml",
    success: function (xml) {

        var items = $(xml).find('sales_list').filter(function () {
            return $('sales_date', this).text() == sales_date;
        });

        var html = '';
        items.each(function (index, sales_list) {
            var id = $(this).find('id').text();
            var outlet_name = $(this).find('outlet_name').text();
            var sales_time = $(this).find('sales_time').text();

            html += '<ul><li class="item-content" id="sales_list"><div class="item-media">' + sales_time + '</div><div class="item-inner"><div class="item-title">' + outlet_name + '</div></div></li></ul>';
        });

        $('#sales_content').append(html);
    }
});