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() {
    // ...
});

直接迭代username个节点。

然而，最好的办法是用一些节点包装整个响应，以便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