在Ajax或jQuery调用后更新HTML

我创建了两个调用，一个是调用我的控制器的ajax，另一个是jquery调用。我只是为了检查我的HTML是否会在触发事件后更新......但是这些方法都没有更新我的HTML（它保持相同的方式）。下面是方法：在Ajax或jQuery调用后更新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替换div标记下的所有内容，编号为#historyList ..我在这里做错了什么？

P.S.我正在使用Chrome浏览器（如果这是一个有用的信息）

来源

2016-05-25 perkes456

你能告诉我关于那个URL（“/ history/list”）是那个文件或目录吗？ – Ramkee

请张贴服务器端代码太... –

/历史< - 是一个控制器和列表是一个行动...我使用Zend框架2 – perkes456

我没有得到结果。您可以使用.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') 
       } 
      }); 
     });

来源

2016-05-25 12:31:35

我已经复制了整个代码，它仍然不工作.. – perkes456

你可以发布“数据”是什么？ –

这是一个整页与标签和和标签... – perkes456

确保$('#historyList')不是一个空数组，并存在于DOM中。如果存在，

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

应该解决问题。

如果我对问题的理解错误，请纠正我。

来源

2016-05-25 12:32:04

我刚刚尝试过，但由于某些原因它仍未更新我的HTML .... – perkes456

在Ajax或jQuery调用后更新HTML

回答

相关问题