Как отобразить сырой XML из ответа AJAX?

Question

У меня есть API, который возвращает либо JSON, либо XML. Я пытаюсь отобразить необработанный XML-ответ от вызова AJAX, используя jquery. Я сделал это успешно с ответом JSON, используя JSON.stringify. Когда я пытаюсь использовать XML, я получаю неопределенное значение.

Это мой код JJuery AJAX:

function fire_ajax_get() {
    $("#btn-list").prop("disabled", true);

    $.ajax({
        type: "GET",
        url: "films",
        accepts: {
            text: "application/xml"
        },
        cache: false,
        success: function (event, xhr) {
            //var json = "<div class=\"alert alert-success\" role=\"alert\">"+ JSON.stringify(data, null, 4) +"</div>";
            var xml = "<div id=\"insert-box\" class=\"alert alert-success\" role=\"alert\">"+xhr.responseXML+"</div>";
            $('#listFilms').html(xml);

            $("#btn-list").prop("disabled", false);
        },
        error: function (e) {
            var feedback = "<div id=\"insert-box\" class=\"alert alert-warning\" role=\"alert\"></div>"
            $('#listFilms').html(feedback);

            console.log("ERROR : ", e);
            $("#btn-list").prop("disabled", false);
        }
    });
}

Закомментированная строка выше отлично работает для JSON (имя переменной было изменено) и выводитследующее в HTML div:

[
    {
        "id": 1,
        "name": "Into The Wild",
        "year": "1997",
        "genre": "Drama/Adventure",
        "director": "Sean Penn"
    },
    {
        "id": 2,
        "name": "Titanic",
        "year": "2007",
        "genre": "Drama/Disaster",
        "director": "James Cameron"
    },
    {
        "id": 3,
        "name": "Rise of the Footsoldier",
        "year": "2008",
        "genre": "Drama/Docudrama",
        "director": "Julian Gilbey"
    }
]

Для XML я просто получаю undefined в качестве вывода

Если я изменю код на

success: function (data) {
        var xml = "<div id=\"insert-box\" class=\"alert alert-success\" role=\"alert\">"+data+"</div>";
        $('#listFilms').html(xml);

        $("#btn-list").prop("disabled", false);
}

Затем я получаю [object Object], [object Object]... в качестве вывода.

Все, что я хочу сделать здесь, это вывести необработанные данные XML в виде строки в HTML-коде.

примерно так

<List>
    <item>
        <id>1</id>
        <name>Into The Wild</name>
        <year>1997</year>
        <genre>Drama/Adventure</genre>
        <director>Sean Penn</director>
    </item>
    <item>
        <id>2</id>
        <name>Titanic</name>
        <year>2007</year>
        <genre>Drama/Disaster</genre>
        <director>James Cameron</director>
    </item>
    <item>
        <id>3</id>
        <name>Rise of the Footsoldier</name>
        <year>2008</year>
        <genre>Drama/Docudrama</genre>
        <director>Julian Gilbey</director>
    </item>
<List>

Куда я иду не так? Я прочитал документы jquery (https://api.jquery.com/ajaxSuccess/) и похоже, что я делаю это правильно. Я искал XML.Stringify, но безрезультатно.

Любые советы будут очень признательны :)

Answer 1

добавить XML непосредственно к вам ajax https://api.jquery.com/jquery.ajax/

"dataType (по умолчанию: Intelligent Guess (xml, json, script или html)) Тип: String Тип данных, которыевы ожидаете ответ от сервера. Если ничего не указано, jQuery попытается вывести его на основе типа ответа MIME (тип XML MIME даст XML, в 1.4 JSON даст объект JavaScript, в сценарии 1.4 будетвыполнить сценарий, и все остальное будет возвращено в виде строки. Доступные типы (и результат, переданный в качестве первого аргумента в ваш обратный вызов успеха):

"xml": возвращает документ XML, который можетобрабатываться через jQuery.

, поэтому поставьте

dataType:"xml",

, а не

 accepts: {
            text: "application/xml"
        },

, теперь просто примите xml

 success: function (xmldata) {

Сейчассо всем этим, я показываю, как поместить XML в текст.

function dothings() {
  var jqxhr = $.ajax({
      type: "GET",
      url: "films",
      dataType: "xml",
      cache: false
    })
    .done(function(dataxml, textStatus, jqXHR) {
      var xml = "<div id='insert-box' class='alert alert-success' role='alert'>" + dataxml + "</div>";
      $('#listFilms').text(xml);
      $("#btn-list").prop("disabled", false);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
      var feedback = "<div id='insert-box' class='alert alert-warning' role='alert'>" + textStatus + "</div>"
      $('#listFilms').html(feedback);
      console.log("ERROR : ", errorThrown);
      $("#btn-list").prop("disabled", false);
    });
}
// just to show the xml ust .text
let x = `<List>
    <item>
        <id>1</id>
        <name>Into The Wild</name>
        <year>1997</year>
        <genre>Drama/Adventure</genre>
        <director>Sean Penn</director>
    </item>
    <item>
        <id>2</id>
        <name>Titanic</name>
        <year>2007</year>
        <genre>Drama/Disaster</genre>
        <director>James Cameron</director>
    </item>
    <item>
        <id>3</id>
        <name>Rise of the Footsoldier</name>
        <year>2008</year>
        <genre>Drama/Docudrama</genre>
        <director>Julian Gilbey</director>
    </item>
<List>`;
$('#listFilms').text(x);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listFilms">empty</div>

Answer 2

Читая ваши вопросы и комментарии к ним, кажется, что у вас есть проблема с отображением символов < и >. В Javascript вы можете достичь этого с помощью:

escape('<test>somecontent</test>')

, конечно, вы можете использовать свой собственный XML здесь.