重新加载部分HTML而不刷新页面？

Question

单击按钮图标时：

<a onclick="updateFav({{v.video_id}}, {{v.favorite}});" ><span  class="myicons {% if v.favorite == 1 %} heart_active{% else %} heart {% endif %} "></span></a>

我正在使用它来更改我的sql数据库中的数据

function updateFav(video_id, favorite) {

  $.ajax({
       type: "POST",
       url: '{{baseurl}}/fav.php',
       data:{id:video_id, fav:favorite},           
  });
}

根据数据库数据（0或1），心脏图标将为灰色或红色。 单击图标即可，刷新页面后即可看到更改。

如何刷新某个html元素？ 以div为例。

基本上：与此页面上的“收藏夹”按钮具有相同的效果（stackoverflow）。

Answer 1

要重新加载页面的一部分而不刷新整个页面，只需使用ajax请求来获取新数据并将其添加到div或您想要查看示例示例的以下任何元素：

  $.ajax({
       type: "GET",
       url: 'getnewData.php',
       success:function(response){
           $('#myElement').html(response);
       },
  });

我们在这里执行的操作是发出ajax请求，其中我们从getnewData.php请求数据，并将数据放置在响应变量中，然后将数据放置在div ，其id = myElement

Answer 2

您可以一直使用反应式框架，也可以在更新数据库后创建一个函数来更新当前元素。

当使用jQuery $（''）或普通js document.querySelector（）进行选择时，您会获得对DOM元素的生动引用。 因此，您可以向其添加/切换/删除“活动类”以将其样式设置为由CSS填充。

这里棘手的部分是，您必须使用自己的代码来保持视图和模型之间的一致性。 反应性框架或双向数据绑定可为您完成此任务。