web-dev-qa-db-ja.com

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>
jqueryajaxasp-classicgetreplacewith
37
thedeepfield

あなたはdataの#showresultsのhtmlを設定し、それをそれ自体で置き換えていますが、これはあまり意味がありませんか？
返されたデータで#showresultsを実際に見つけて、DOMの#showresults要素をajax呼び出しからのhtmlで更新しようとしているところを推測しています：

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

ほぼ5年後、私の答えは多くの人々の苦労を少し減らすことができると思います。

DOMの要素をajax呼び出しからのもののHTMLで更新する

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

JQueryの 。load（） を使用することもできます。

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

$ .get（）とは異なり、挿入するリモートドキュメントの一部を指定できます。これは、urlパラメーターの特別な構文で実現されます。 1つ以上のスペース文字がストリングに含まれている場合、最初のスペースに続くストリングの部分は、ロードされるコンテンツを決定するjQueryセレクターであると想定されます。

取得したドキュメントの一部のみを使用するように上記の例を変更できます。

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

このメソッドを実行すると、ajax/test.htmlのコンテンツが取得されますが、jQueryは返されたドキュメントを解析して、コンテナのIDを持つ要素を見つけます。この要素は、そのコンテンツと共に、結果IDを持つ要素に挿入され、取得されたドキュメントの残りは破棄されます。

1
Endless