与jQuery Ajax响应更新DIV HTML [英] Update div with jQuery ajax response html

问题描述

我想更新与从Ajax响应HTML内容的股利。我beleive而不是只在HTML响应所选择的DIV我有语法正确的，但在div内容被替换整个HTML页面的响应。我究竟做错了什么？

 ＆LT;脚本＆GT;
        $（'＃submitform）。点击（函数（）{
            $阿贾克斯（{
            网址：getinfo.asp
            数据： {
                txtsearch：$（'＃appendedInputButton）VAL（）。
            }，
            键入：GET，
            数据类型：HTML，
            成功：功能（数据）{
                $（'＃showresults）replaceWith（$（'＃showresults）HTML（数据））;
            }，
            错误：函数（XHR，状态）{
            警报（对不起，出现了一个问题！）;
            }，
            完成：功能（XHR，状态）{
                //$('#showresults').slideDown('slow）
            }
            }）;
        }）;
    ＆LT; / SCRIPT＆GT;
 

解决方案

正在制定的 #showresults 的任何数据的HTML 是，然后用自身替换它，这并没有多大意义？
我猜你在哪里真的试图找到 #showresults 在返回的数据，然后更新 #showresults 元素在从Ajax调用之一的HTML DOM：

  $（'＃submitform）。点击（函数（）{
    $阿贾克斯（{
        网址：getinfo.asp
        数据： {
            txtsearch：$（'＃appendedInputButton）VAL（）。
        }，
        键入：GET，
        数据类型：HTML，
        成功：功能（数据）{
            VAR的结果= $（'＆LT; D​​IV /＆GT;'）。追加（数据）.find（'＃showresults）HTML（）;
            $（'＃showresults）HTML（结果）;
        }，
        错误：函数（XHR，状态）{
            警报（对不起，出现了一个问题！）;
        }，
        完成：功能（XHR，状态）{
            //$('#showresults').slideDown('slow）
        }
    }）;
}）;
 

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?

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

解决方案

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

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

这篇关于与jQuery Ajax响应更新DIV HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！