jquery - ajax xml 出现空数据错误

Question

我有一个简单的 php 页面，它回显简单的 xml 数据，如下所示

<user>
<username>jack</username>
<userage>20</userage>
</user>
<user>
<username>sally</username>
<userage>30</userage>
</user>
<user>
<username>steph</username>
<userage>40</userage>
</user>

并使用此 jquery 代码在单击这样的按钮后在 div 内显示这些信息

$(document).ready(function(){

    $("#get").on('click',function(){

            $.get('dataxml.php',function(data){

                var str = '';
                $(data).find('user').each(function(){
                    var uname = ''; var uage = '';
                    $(this).find('username').each(function(){
                        uname = $(this).text();
                    });
                    $(this).find('userage').each(function(){
                        uage = $(this).text();
                    });
                    str += "<div><p class='uname'>"+uname+"</p><p class='uage'>"+uage+"</p></div>";
                });
            console.log(str);

            $("#result").html(str);
        });
    });
});

控制台显示“空字符串”，但是当我查看控制台数据时，我得到的结果如图所示，并且 #result div 为空。那么错误是什么以及如何修复它？

Answer 1

当您使用时

$(data).find('user')

它不会产生任何结果，因为 user 是 XML 文档的根节点(从技术上讲，该结构不是有效的 XML)。

您可以选择

$(data).each(function() {
    // ...
});

直接迭代用户名节点。

但是最好的办法是用某个节点包装整个响应，这样 XML 将变成:

<users>
    <user>
        <username>jack</username>
        <userage>20</userage>
    </user>
    <user>
        <username>sally</username>
        <userage>30</userage>
    </user>
    <user>
        <username>steph</username>
        <userage>40</userage>
    </user>
</users>

然后您将能够使用$(data).find('user')。

演示:http://plnkr.co/edit/7CquZyDTPFWbROgZWVP1?p=preview