jQuery ajax 응답 html로 div 업데이트

jQuery ajax 응답 html로 div 업데이트

저는 ajax html 응답의 내용으로 div를 업데이트하려고 합니다.구문은 맞지만 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>

의 html을 설정하고 있습니다.#showresults어떤 것이든data그 자체를 대체한다는 게 말이 안 되는 건가요?
내 생각엔 네가 정말로 찾고 있는 곳이 어디일 것 같은데#showresults를 갱신합니다.#showresultsAjax 콜의 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')
        }
    });
});

거의 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));
},

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를 가진 요소를 찾습니다.이 요소는 내용물과 함께 결과 ID와 함께 요소에 삽입되고 검색된 나머지 문서는 삭제됩니다.

언급URL : https://stackoverflow.com/questions/18064666/update-div-with-jquery-ajax-response-html