单击链接而不重新加载所有页面时如何刷新div内容？答案

【问题标题】：How to refresh a div content when clicking a link without reloading all the page?单击链接而不重新加载所有页面时如何刷新div内容？
【发布时间】：2012-09-24 19:32:17
【问题描述】：

在我的网站中，作者（用户）可以将帖子标记为收藏。

它是这样工作的：

   if ($favinfo == NULL || $favinfo == "") { 
      $favicon = "<a href=\"".$siteurl."/author/favorites.php?add=".$articleinfo['id']."\">ADD</a>"; .
   }
    else { 
      $favicon = "<a href=\"".$siteurl."/author/favorites.php?remove=".$articleinfo['id']."\">REMOVE</a>"; 
   }

它应该看起来是动态的，它可以工作，当用户点击添加时，它会将帖子添加到他的收藏夹并使用删除链接重新加载页面。

问题在于它不是真正动态的，它会重新加载所有页面。

我怎样才能只重新加载该链接（在 div 中）？

我知道我必须使用 ajax、jquery 等，但我尝试了一些在 S.O. 中找到的示例。但没有成功。

【问题讨论】：

看看jQuery load() [api.jquery.com/load/]
使用 ajax 向服务器发送请求，在服务器端评估请求，做出相应响应，用数据更新元素。

标签： php jquery mysql ajax html

【解决方案1】：

 $('a').on('click', function(e){

    // the default for a link is to post a page..    
    // So you can stop the propagation

     e.stopPropagation(); 
});

包含此内容会阻止您的页面重新加载整个页面

【讨论】：

我需要在哪里包含此代码？它会“停止传播”所有“a”标签吗？我只需要为有问题的链接“停止传播”。谢谢。

【解决方案2】：

如果您希望它是动态的，则需要使用 AJAX。 jQuery 有ajax support，这让这很容易。如果你不熟悉 ajax 或 javascript，你应该先阅读它。

PHP

if ($favinfo == NULL || $favinfo == "") { 
    $favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"add\" href=\"".$siteurl."/author/favorites.php"\">ADD</a>"; .
}
else { 
    $favicon = "<a class=\"fav-btn\" data-id=\"".$articleinfo['id']."\" data-action=\"remove\" href=\"".$siteurl."/author/favorites.php"\">REMOVE</a>"; 
}

JavaScript

$('a.fav-btn').on('点击', function(e){

  var $this = $(this),                    // equates to the clicked $('a.fav-btn')
      url = $this.attr('href'),           // get the url to submit via ajax
      id = $this.attr('data-id'),         // id of post
      action = $this.attr('data-action'); // action to take on server


  $.ajax({
      url: url+'?'+action+'='+id
  }).done(function(){ // once favorites.php?[action]= is done...

      // because this is in .done(), the button will update once the server has finished
      // if you want the link to change instantly and not wait for server, move this outside of the done function
      if(action === 'add'){
          $this.attr('data-action', 'remove').html('REMOVE'); // update the button/link
      }else{
          $this.attr('data-action', 'add').html('ADD');
      }

  })

  return false; // prevent link from working so the page doesn't reload
}

【讨论】：

【解决方案3】：

如果您可以使用 JQuery，您可以使用一些工具来完成此操作。

拥有识别链接的结构/方法。
您可以在添加按钮上设置一个click() 侦听器，该侦听器将调用JQuery $.post(url, callback) 函数。
在该回调函数中，您可以让它使用“删除”链接更新相应的 DIV（您在 #1 中定义的）。即，如果您通过 ID 识别 DIV，则可以通过 $('#id') 检索它，然后更新该对象。

同样的想法也适用于您添加的“删除”链接。

所以，一般来说……

<button id="add">Add</button>

<div id="links"> ...</div>

<script>
$('#add').click(function() { 
     $.post('your url',
         function(data) {
             var links = $('#links');
             // update your links with 'remove' button, etc
         }
     );
});

</script>

【讨论】：