42

我正在尝试使用来自 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>
4

3 回答 3

81

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

$('#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')
        }
    });
});
于 2013-08-05T18:10:22.537 回答
10

差不多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));
},
于 2018-05-18T02:32:08.683 回答
2

也可以使用 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 的元素中，其余检索到的文档将被丢弃。

于 2016-09-08T09:38:25.753 回答