Обновить div с jQuery ajax response html

Я пытаюсь обновить div с содержимым из ответа ajax html. Я верю, что у меня правильный синтаксис, однако содержимое div заменяется на весь ответ HTML-страницы, а не только на div, выбранный в html-ответе. Что я делаю неправильно?

    <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>

Ответ 1

Вы устанавливаете html #showresults любого data, а затем заменяете его самим, что не имеет особого смысла?
Я предполагаю, что вы действительно пытаетесь найти #showresults в возвращаемых данных, а затем обновите элемент #showresults в DOM с помощью html с одного из вызова ajax:

$('#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')
        }
    });
});

Ответ 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 анализирует возвращенный документ, чтобы найти элемент с идентификатором контейнера. Этот элемент вместе с его содержимым вставляется в элемент с идентификатором результата, а остальная часть извлеченного документа отбрасывается.