1

画像のあるページがあります。画像には画像をお気に入りに追加するためのボタンがあります。彼らがボタンをクリックすると、私は彼らのお気に入りに画像を追加するPHPスクリプトを持っています。

PHPスクリプトのページに移動せずにPHPコードを実行したい。

私のhtmlは次のようなものです：

 <div id="image">
    <form action="favoriet.php" method="post">
            <input type="hidden" name="aid" value="<?php echo $subimgid?>">
            <input type="image" src="/media/img/icons/twitter.png" alt="Submit button">
            </form>
                </div>

そのため、subimgidをfavoriet.phpに投稿し、favoriet.phpで、投稿された値を使用してデータベースに挿入するスクリプトを実行し、セッションユーザーIDを支援します。すべてが機能していますが、favoriet.phpページを画面に表示したくありません。

jQuery / ajaxが必要だと思いますが、よくわかりません。

4

3 に答える 3

5

私がすることは、クラスをimgに追加してから、idを保持するfavimgという別の属性を追加することです。data-id次に、画像上でjQueryを直接使用でき、フォームは必要ありません。

favoriet.php以下のコードは、属性に保存されているIDを使用してdata-idPOSTリクエストを送信します

<img class='favimg' data-id="<?php echo $subimgid?>" src="/media/img/icons/twitter.png" alt="Submit button">

<script>
$('.favimg').click(function() {
  $.post('favoriet.php', { aid: $(this).attr('data-id')});
});
</script>

補足：代替テキストは画像について何かを言う必要があります。したがって、画像がTwitterのロゴである場合、代替テキストとして「twitter」を使用します。それは検索エンジンのためのより良いインデックスを作成するでしょう。

submit buttonページに画像が1つしかなく、その目的が完全なフォームを送信することである場合は、の代替が役立ちます。提出したいのは「ツイッターボタンをクリックしました」なので、ツイッターのロゴが入っていることを知っておく必要があります。

于 2013-03-12T11:08:50.180 に答える
1

投稿またはAJAXの必要性を回避する回答を追加するだけで、どちらもなしでこれを実行できることを示します。

画像タグ通信

イメージタグを使用してサーバーと通信できます。

<div class="image">
  <img src="image/to/be/favourited.jpg" data-aid="123" />
  <a href="favoriet-fallback.php?aid=123">
    <img src="/media/img/icons/twitter.png" />
  </a>
</div>

<script>
  jQuery(function(){
    jQuery('.image > a').click(function(){
      var
        img = $(this).siblings('img'),
        src = img.attr('src'),
        aid = img.attr('data-aid'),
        esc = window.encodeURIComponent ? encodeURIComponent : escape
      ;
      /// here you have the choice of using the image to be favourited or
      /// the twitter icon. I chose the favourited image for this example.
      img.attr('src', 'favoriet.php?src=' + esc(src) + '&aid=' + esc(aid) );
      return false;
    });
  });
</script>

このコードでは、簡単な方法を使用してfavoriet.php指定されたイメージを返すように変更する必要があります。100％必要ではありませんが、を作成することをお勧めします。srcreadfilefavoriet-fallback.php

スクリプト/画像タグの挿入

新しいスクリプトまたは画像タグを挿入して、リクエストを実行することもできます。

<script>
  jQuery(function(){
    jQuery('.image > a').click(function(){
      var
        img = $(this).siblings('img'),
        src = img.attr('src'),
        aid = img.attr('data-aid'),
        esc = window.encodeURIComponent ? encodeURIComponent : escape
      ;
      /// you could build a script tag or a pixel image here
      var script = document.createElement('script');
          script.src = 'favoriet.php?src=' + esc(src) + '&aid=' + esc(aid);
      jQuery('body').append(script);
      return false;
    });
  });
</script>

この例は明らかにfavoriet.php、既存のページと対話できる本格的なJavaScriptを返す必要があることを意味します。

上記は、POSTの代わりにGETリクエストを使用する愚かな例のほんの一部です。これには、メリットとデメリットもあります。これらの例はどちらもjQueryを必要としません。私は、速度と明確さのためにjQueryを使用しました。

Hugoのデザインははるかにエレガントですが、AJAXが唯一の方法ではないことを証明するためだけにこれらについて言及します。

于 2013-03-12T11:41:05.520 に答える
0

はい、その通りです。Ajaxが必要です。Jqueryはjavascriptのフレームワークです。

では、質問に戻りましょう。

これがあなたがする必要があることです。関数を画像ボタンのonclick=""（使用したものは何でも）にバインドし、画像のIDをパラメーターとして渡します。

onclick="add_fav('2')"

ユーザーがそれをクリックすると、add_fav関数が楽しくなり、画像のIDがパラメーターとして送信されます。関数内で、この値をfavorite.phpに投稿します。

function add_fav(id){
    var data={'image_id':id}
    var url="favorite.php";

    $.ajax({type:"POST",url,data,function(response){ // handle the response
    }});

}

を使用してfavoriete.phpの値を取得できます

$id=$_POST['image_id'];

次に、それをデータベースに保存し、成功メッセージをエコーバックします。

于 2013-03-12T11:13:21.017 に答える