Как добавить AJAX ответ

Question

Я искал сайт и неожиданно не нашел ответов, подходящих для моей ситуации. Поэтому я разместил этот вопрос.

Я использую jQuery AJAX, чтобы получить веб-страницу и динамически добавить ее на сайт. Но мой код не работает и выдает ошибку ERROR TypeError: "data.append is not a function".

Мой код:

 $.ajax({
      url: "http://localhost:3000/treeviewuser/testuser",
      beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
      .done(function( data ) {
        if ( console && console.log ) {
          console.log( "Sample of data:", data.slice( 0, 100 ) );
          data.append(data);
        }
      });
  }); 

Answer 1

Для дальнейшего уточнения моего комментария, data - это ответ, возвращенный из конечной точки, у которой нет метода .append(). Основываясь на вашем ответе, вы намереваетесь напечатать вывод документа. Есть два способа сделать это:

1. Создайте новый элемент с текстом и добавьте к документу

Если у вас нет целевого элемента на странице, к которой вы хотите добавить данные, вы можете просто создать новый элемент и установить для его внутреннего текста значение данные, возвращаемые с сервера:

$.ajax({
    url: "http://localhost:3000/treeviewuser/testuser",
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
}).done(function( data ) {
    const el = document.createElement('div');
    el.innerText = data;

    document.appendChild(el);
});

Если вам удобнее писать в jQuery, вы также можете сделать это:

$.ajax({
    url: "http://localhost:3000/treeviewuser/testuser",
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
}).done(function( data ) {
    const $el = $('<div />', {
        text: data
    });

    $(document).append($el);
});

2. Добавить текст к уже существующему элементу

Допустим, у вас есть элемент с идентификатором output, на который вы хотите напечатать ответ, т.е. <div id="output"></div>, тогда вы можете сделать это:

$.ajax({
    url: "http://localhost:3000/treeviewuser/testuser",
    beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    }
}).done(function( data ) {
    $('#output').text(data);
}); 

Answer 2

Вам нужно найти элемент, к которому вы хотите добавить данные ответа. $("#my_div_id").append(data[0]) вместо data.append(data); Если ваши данные array или array of objects, вам понадобится l oop через каждый из них при добавлении; иначе, когда данные, которые вы возвращаете с вашего ajax, относятся к типу text или html, вы можете просто добавьте его прямо в ваш документ. $("#my_div_id").append(data)