Как я могу отобразить содержимое файла XML в html div с помощью вызова ajax? - PullRequest
Новая
       20

Как я могу отобразить содержимое файла XML в html div с помощью вызова ajax?

0 голосов
/ 17 июня 2019

Я работаю над онлайн-сайтом для управления контактами, и мне нужно отобразить мои контакты из файла XML в html divs.Как я могу сделать это, используя исключительно AJAX CALL?Мой 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>

1 Ответ

0 голосов
/ 17 июня 2019

Попробуйте это в своем javascript, используя JQuery $ .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>
...