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

Я пытаюсь обновить div содержимым из html-ответа ajax. Я считаю, что у меня правильный синтаксис, однако содержимое 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>

get jquery ajax asp-classic replacewith
person thedeepfield    schedule 05.08.2013    source источник

Ответы (3)


arrow_upward
81
arrow_downward

Вы устанавливаете 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')
        }
    });
});
person adeneo    schedule 05.08.2013
comment
привет, если возможно, не могли бы вы объяснить, что $('‹div /›').append(data) делает в этом коде? - person thedeepfield; 06.08.2013
comment
find() находит только дочерние элементы, а не элементы, находящиеся в корне data, поэтому добавление data к пустому div гарантирует, что все элементы в data на самом деле являются дочерними, и что find() всегда будет работать (пока элемент существует в данных). - person adeneo; 06.08.2013
comment
так что вы в основном создаете пустой div, добавляете к нему html-ответ, используете find () для поиска результатов шоу, а затем копируете html внутри этого div? Что делает <div />? Глядя на документ, я подумал, что вы ищете селектор. Спасибо за ваших пациентов .. это действительно помогает понять это. - person thedeepfield; 06.08.2013
comment
$('<div />') создает новый пустой элемент в памяти, затем к этому элементу добавляются данные, и все в данных теперь является дочерними элементами внутри пустого элемента, а find() ищет только дочерние элементы, вот почему это сделано таким образом. Другим вариантом было бы использование filter(), но это находит только корневые элементы, поэтому вам обычно приходится выбирать либо find(), либо filter() в зависимости от HTML, и, поскольку я действительно не знал, как выглядит HTML, я использовал работы везде решение добавления к пустому элементу и использования find(). - person adeneo; 06.08.2013

arrow_upward
9
arrow_downward

Спустя почти 5 лет я думаю, что мой ответ может немного облегчить тяжелую работу многих людей.

Таким образом можно обновить элемент в DOM с помощью HTML из элемента из вызова ajax.

$('#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));
},
person Lemayzeur    schedule 18.05.2018
comment
Понимаю. В моем случае мне просто нужно было заменить .text() на .html()... $('.some_content').html(data) - person gseattle; 05.04.2021

arrow_upward
2
arrow_downward

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

person Endless    schedule 08.09.2016