使用 jQuery ajax 响应 html 更新 div答案

【问题标题】：Update div with jQuery ajax response html使用 jQuery ajax 响应 html 更新 div
【发布时间】：2013-08-06 13:03:24
【问题描述】：

我正在尝试使用来自 ajax html 响应的内容来更新 div。我相信我的语法是正确的，但是 div 内容被替换为整个 HTML 页面响应，而不仅仅是在 html 响应中选择的 div。我做错了什么？

    <script>
        $('#submitform').click(function() {
            $.ajax({
            url: "getinfo.asp",
            data: {
                txtsearch: $('#appendedInputButton').val()
            },
            type: "GET",
            dataType : "html",
            success: function( data ) {
                $('#showresults').replaceWith($('#showresults').html(data));
            },
            error: function( xhr, status ) {
            alert( "Sorry, there was a problem!" );
            },
            complete: function( xhr, status ) {
                //$('#showresults').slideDown('slow')
            }
            });
        });
    </script>

【问题讨论】：

标签： jquery ajax asp-classic get replacewith

【解决方案1】：

您正在设置data 的任何#showresults 的html，然后用它自己替换它，这没有多大意义？
我猜你真的想在返回的数据中找到#showresults，然后用来自ajax调用的html更新DOM中的#showresults元素：

$('#submitform').click(function () {
    $.ajax({
        url: "getinfo.asp",
        data: {
            txtsearch: $('#appendedInputButton').val()
        },
        type: "GET",
        dataType: "html",
        success: function (data) {
            var result = $('<div />').append(data).find('#showresults').html();
            $('#showresults').html(result);
        },
        error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
});

【讨论】：

你好，如果可能的话，你能解释一下 $('
').append(data) 在这段代码中的作用吗？
find() 只查找子元素，而不是 data 根中的元素，因此将 data 附加到空的 div 可确保 data 中的所有元素实际上都是子元素，并且find() 将始终有效（只要元素存在于数据中）。
所以你基本上创建了一个空白 div，将 html 响应附加到它，使用 find() 查找 showresults，然后在该 div 中复制 html？ <div /> 是做什么的？看着文档，我以为您正在寻找选择器。感谢您的患者.. 理解这一点真的很有帮助。
$('<div />') 在内存中创建一个新的空元素，然后将数据附加到该元素，数据中的所有内容现在都是空元素内的子元素，而find() 仅搜索子元素，所以这是为什么这样做。另一种选择是使用filter()，但这只会找到根元素，因此您通常必须根据 HTML 决定选择find() 或filter()，因为我真的不知道 HTML 是什么样的，我使用了附加到空元素并使用find()的“无处不在”的解决方案。

【解决方案2】：

差不多5年后，我想我的回答可以减少一点点很多人的辛苦。

使用 ajax 调用中的 HTML 更新 DOM 中的元素可以通过这种方式实现

$('#submitform').click(function() {
     $.ajax({
     url: "getinfo.asp",
     data: {
         txtsearch: $('#appendedInputButton').val()
     },
     type: "GET",
     dataType : "html",
     success: function (data){
         $('#showresults').html($('#showresults',data).html());
         // similar to $(data).find('#showresults')
     },
});

或replaceWith()

// codes

success: function (data){
   $('#showresults').replaceWith($('#showresults',data));
},

【讨论】：

我明白了。在我的情况下，我只需要将 .text() 替换为 .html() ... $('.some_content').html(data)

【解决方案3】：

也可以使用jQuery的.load()

$('#submitform').click(function() {
  $('#showresults').load('getinfo.asp #showresults', {
    txtsearch: $('#appendedInputButton').val()
  }, function() {
    // alert('Load was performed.')
    // $('#showresults').slideDown('slow')
  });
});

与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法来实现的。如果字符串中包含一个或多个空格字符，则字符串中第一个空格之后的部分被假定为确定要加载的内容的 jQuery 选择器。

我们可以修改上面的示例以仅使用获取的文档的一部分：

$( "#result" ).load( "ajax/test.html #container" );

当这个方法执行时，它会获取ajax/test.html 的内容，然后jQuery 会解析返回的文档以找到ID 为container 的元素。此元素及其内容被插入到 ID 为 result 的元素中，而检索到的文档的其余部分将被丢弃。

【讨论】：