在 HTML 中分配 XML-AJAX 响应答案

【问题标题】：Assign XML- AJAX response in HTML在 HTML 中分配 XML-AJAX 响应
【发布时间】：2015-05-27 16:01:26
【问题描述】：

我有从 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> 内容。我怎样才能做到这一点？

【问题讨论】：

您能给我们举一个您尝试排序的 XML 示例，以及您希望它如何排序吗？也许是一个没有 ajax 的简单 jsfiddle？
我添加了 XML 内容
您要对xml 的哪个属性进行排序？？
我想将我的 xml 内容分配给特定的 div 和 ul ？有错误请见谅。

标签： javascript jquery html ajax xml

【解决方案1】：

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

HTML

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

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);
    }
});

【讨论】：

附加 html 是复制数据。我怎样才能防止这种情况发生？
@Nehil Mistry 您可以使用.remove() 删除现有的ul，然后再添加新的$('#sales_content').find('ul').remove();
谢谢。但我将 append 替换为 html 之类的 $('#sales_content').html(html);

【解决方案2】：

在对数组执行 foreach 循环之前尝试对数组进行排序：

items.sort(function(a, b) {
   var aTime = $(a).find('sales_time').text();
   var bTime = $(b).find('sales_time').text();
   return (aTime == bTime) ? 0 : (aTime > bTime) ? 1 : -1;
}).each(function(index, sales_list){
    //Now that it's sorted, do stuff here:
    var id = $(this).find('id').text();
    var outlet_name = $(this).find('outlet_name').text();
    var sales_time = $(this).find('sales_time').text();
});

【讨论】：