0

私のウェブサイトでは、作成者（ユーザー）が投稿をお気に入りとしてマークできます。

これは次のように機能します。

   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などを使用する必要があることはわかっていますが、ここSOで見つかったいくつかの例を試しましたが、成功しませんでした。

4

3 に答える 3

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

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

     e.stopPropagation(); 
});

これを含めると、ページ全体がリロードされなくなります

于 2012-09-24T19:35:06.600 に答える
0

動的にしたい場合は、AJAX を使用する必要があります。jQuery にはajax がサポートされているため、これが非常に簡単になります。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
}
于 2012-09-24T20:01:44.600 に答える
0

JQuery の使用に問題がない場合は、これを行うためのツールがいくつかあります。

  1. リンクを識別する構造/方法を用意してください。
  2. JQuery $.post(url, callback)関数を呼び出す追加ボタンにclick()リスナーを設定できます。
  3. そのコールバック関数では、対応する 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>
于 2012-09-24T20:02:52.417 に答える