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 $（＆＃39;＆＃39;）或使用plain js document.querySelector（）进行选择时，您将获得对DOM元素的生动引用。因此，您可以添加/切换/删除＆＃34;活动类＆＃34;把它称为充满css。

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

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

2 个答案: