在Ajax或jQuery調用之后更新HTML

Question

我創建了兩個調用，一個是對控制器的ajax調用，另一個是jquery調用。 我都只是為了檢查觸發事件后我的HTML是否會更新...但是這些方法都沒有更新我的HTML（它保持不變）。 方法如下：

方法1：

$("#btnSearch").click(function(){
       var startDate =  $.trim($("#startDate").val());
       var endDate =  $.trim($("#endDate").val());
       $.post("/history/list",{'startDate':startDate,"endDate":endDate},function(data){
           var result = $('<div />').append(data).find('#historyList').html();
           $('#historyList').append(result);
           console.log(result);
// the result is displayed correctly in the console...
       });
    });
// This is supposed to update my HTML in the browser now, but it's not showing anything new...

方法2：

$('#btnSearch').click(function () {
    console.clear();
    $.ajax({
        url: "/history/list",
        data: {
            startDate: $('#startDate').val(),
            endDate: $('#endDate').val(),
        },
        type: "GET",
        dataType: "html",
        success: function (data) {
            var result = $('<div />').append(data).find('#historyList').html();
            $('#historyList').append(result);
            console.log(result);
// the result is displayed correctly in the  console...
        },
        error: function (xhr, status) {
            alert("Sorry, there was a problem!");
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
});

一旦調用完成並返回數據，這些方法都不會更新我的HTML ...數據對象保存HTML作為結果，我希望數據對象中的HTML替換id ＃下div標簽中的所有內容。 historyList ..我在這里做錯了什么？

PS我正在使用Chrome瀏覽器（如果這是有用的信息）

Answer 1

我沒有得到結果。 您是否可以使用.html，像這樣：

$('#historyList').html(data);

或像這樣的整個代碼。

$('#btnSearch').click(function () {
            console.clear();
            $.ajax({
                url: "/history/list",
                data: {
                    startDate: $('#startDate').val(),
                    endDate: $('#endDate').val(),
                },
                type: "GET",
                dataType: "html",
                success: function (data) {
                    $('#historyList').html(data);
                    console.log(result);
// the result is displayed correctly in the  console...
                },
                error: function (xhr, status) {
                    alert("Sorry, there was a problem!");
                },
                complete: function (xhr, status) {
                    //$('#showresults').slideDown('slow')
                }
            });
        });

Answer 2

確保$('#historyList')不是空數組，並且存在於DOM中。 如果有的話

$('#historyList').html(data);

應該解決問題。

如果我對問題的理解是錯誤的，請糾正我。