Question

我正在使用在线网站进行联系人管理，因此需要显示html div中xml文件中的联系人。我如何才能单独使用AJAX呼叫来做到这一点？我的xml看起来像这样，我想将此标签放在一些div中，每个联系人一个div。

<?xml version="1.0" encoding="UTF-8"?>
<contacts>
    <contact id_contact="1">
       <firstName>Lara</firstName>
       <lastName>Adey</lastName>
       <photo>lara.png</photo>
       <email>lara.adey@gmail.com</email>
       <birthday>1999-03-12</birthday>
       <adress>Brooklyn 99</adress>
       <description>Nice girl</description> 
       <phone>520-447-9821</phone>
       <interests>Coding</interests>
       <idUser>2</idUser>
    </contact>
</contacts>

Answer 1

使用JQuery $ .ajax在您的JavaScript中尝试一下
文档：http://api.jquery.com/jquery.ajax/

$(document).ready(function () {
$.ajax({
    type: "GET",
    url: "contacts.xml",
    dataType: "xml",
    success: xmlParse
   });
});

function xmlParse(xml) {

$(xml).find("contact").each(function () {
    $(".main").append('<div class="contact"><div class="firstname">' + $(this).find("firstName").text() + '</div><div class="lastName">' + $(this).find("lastName").text() + '</div><div class="photo">Photo ' +
$(this).find("photo").text() + '</div><div class="email">Email ' +    $(this).find("email").text() +'</div><div class="birthday">Birthday ' +  $(this).find("birthday").text() + '</div><div class="address">Address ' +  $(this).find("address").text() + '</div><div class="description">Description ' +  $(this).find("description").text() + '</div><div class="phone">Phone ' +  $(this).find("phone").text() + '</div><div class="interests">Interests ' + 
$(this).find("interests").text() + '</div><div class="idUser">User ID ' + 
$(this).find("idUser").text() + '</div></div>');
    $(".contact").fadeIn(1000);
 });

}

在您的HTML中：

<div class="main"></div>

如何使用ajax调用在html div中显示xml文件的内容？

1 个答案: