javascript - 如何附加 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。将文本附加到预先存在的元素

假设您有一个 ID 为 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);
});