使用 jQuery ajax 响应 html 更新 div

Update div with jQuery ajax response html

提问by thedeepfield

I am trying to update a div with the content from an ajax html response. I beleive I have the syntax correct, however the div content gets replaced with the entire HTML page response, instead of just the div selected in the html response. What am I doing wrong?

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

回答by adeneo

You are setting the html of #showresultsof whatever datais, and then replacing it with itself, which doesn't make much sense ?
I'm guessing you where really trying to find #showresultsin the returned data, and then update the #showresultselement in the DOM with the html from the one from the ajax call :

您正在设置#showresults任何data内容的 html ，然后将其替换为自身，这没有多大意义？
我猜你真的想#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')
        }
    });
});

回答by Lemayzeur

Almost 5 years later, I think my answer can reduce a little bit the hard work of many people.

差不多5年后，我想我的回答可以减少很多人的辛勤工作。

Update an element in the DOMwith the HTML from the one from the ajax callcan be achieved that way

可以通过这种方式使用来自 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')
     },
});

or with replaceWith()

或与 replaceWith()

// codes

success: function (data){
   $('#showresults').replaceWith($('#showresults',data));
},

回答by Endless

It's also possible to use jQuery's .load()

也可以使用 jQuery 的.load()

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

unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则字符串中第一个空格后面的部分将被假定为 jQuery 选择器，用于确定要加载的内容。

我们可以修改上面的示例以仅使用获取的部分文档：

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

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

当这个方法执行时，它检索 ajax/test.html 的内容，然后 jQuery 解析返回的文档以找到 ID 为 container 的元素。该元素及其内容被插入到 ID 为 result 的元素中，而检索到的文档的其余部分将被丢弃。