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

Question

>我正在开发一个用于联系人管理的在线网站，我需要在 htmldivs 中显示来自 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>[e-mail]</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 在 JavaScript 中尝试此操作 $.ajax
文档 ： 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>