使用AJAX和jQuery.get(）从外部文档中检索特定元素

Retrieve specific element from external document using AJAX and jQuery .get()

本文关键字：文档 检索 元素 从外部 AJAX jQuery get 使用      更新时间：2023-09-26

使用ajax和jQuery，当用户切换开关时，我试图从外部文档中的特定元素加载内容。目标内容由切换开关元件的name指定。

所以我从HTML开始。。。

<input id="toggle1" name="externalContent1" class="toggle" type="checkbox">
<input id="toggle2" name="externalContent2" class="toggle" type="checkbox">
<input id="toggle3" name="externalContent3" class="toggle" type="checkbox">

我第一次尝试使用".load（）"…

$('.toggle').click(function () {
  var section = '#' + $(this).attr('name');
  if ($(this).is(':checked')) {
    $('#target').load("content.htm " + section);
  }
  else {
    $(section).remove();
  }
});

这是有效的，但它替换了#target元素的内容。我需要追加而不是替换。

因此，我使用.get() 尝试了其他So问题中的一些建议

if ($(this).is(':checked')) {
  var content;
  $.get('content.htm ' + section, function(data) {
    content = data;
    $('#target').append(content);
  });
}

但是，这些使用.get()、.post()和.ajax()的解决方案（至少以我尝试过的方式）不允许我在content.htm中指定元素，它只是拉取整个文档。

是否有方法使用.get()从外部文档中检索特定元素

当我仔细考虑这个问题时，我想我也可以在检索到的页面上搜索section，并且只附加它。我发现了这个建议，并尝试了一下，但我也没有运气：

if ($(this).is(':checked')) {
  $.ajax({
    url: 'content.htm',
    type: 'GET',
    success: function(res) {
      $(res.responseText).find(section).each(function(){
        $('#target').append($(this).html());
      });
    }
  });
}

只要进行一些黑客攻击，就可以使用.load()解决方案。首先加载到一个单独的元素中，然后进行追加。

if ($(this).is(':checked')) {
    $('<div id="tempForLoad">').load("content.htm " + section, function(){
        $('#target').append($('#tempForLoad').html());
        $('#tempForLoad').remove();
    });
 }
相关文章：