用img隐藏后PHP脚本

我有一个图像页面，在图像上有一个按钮，用于收藏图像。 如果他们点击这个按钮，我有一个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>

我要做的是在img
favimg
中添加一个类，然后添加另一个名为
data id
的属性，该属性保存id。然后您可以直接在图像上使用jQuery，而不需要表单

下面的代码将使用存储在
数据ID
attibute中的ID向
favoriet.php
提交POST请求

<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>


$（'.favimg'）。单击（函数（）{
$.post（'favoriet.php'，{aid:$（this.attr（'data-id'）}）；
});

旁注：alt文本应该说明一些关于图像的信息。因此，如果图像是twitter徽标，我会使用“twitter”作为alt文本。这将为搜索引擎创建更好的索引

如果页面上只有一个图像，并且其目标是提交完整的表单，则alt的
submit按钮
是有用的。您要提交的是“我点击了twitter按钮”，因此我的用户必须知道它包含twitter徽标。
我要做的是向img
favimg
添加一个类，然后添加另一个名为
data id
的属性，该属性保存id。然后您可以直接在图像上使用jQuery，而不需要表单

下面的代码将使用存储在
数据ID
attibute中的ID向
favoriet.php
提交POST请求

<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>


$（'.favimg'）。单击（函数（）{
$.post（'favoriet.php'，{aid:$（this.attr（'data-id'）}）；
});

旁注：alt文本应该说明一些关于图像的信息。因此，如果图像是twitter徽标，我会使用“twitter”作为alt文本。这将为搜索引擎创建更好的索引

如果页面上只有一个图像，并且其目标是提交完整的表单，则alt的
submit按钮
是有用的。您要提交的是“我点击了twitter按钮”，因此我的用户必须知道它包含twitter徽标。
是的，您是对的，需要Ajax。Jquery是javascript的框架

回到你的问题上来

这是你需要做的。将函数绑定到图像按钮的onclick=“”（无论您使用了什么）并将图像的id作为参数传递

onclick="add_fav('2')"

当用户单击它时，您的add_fav函数将很有趣，图像的id将作为参数发送。在函数内部，将此值发布到您最喜欢的.php

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

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

}

您可以使用

$id=$_POST['image_id'];

然后将其保存在数据库中并回显成功消息。
是的，您是对的，需要Ajax。Jquery是javascript的框架

回到你的问题上来

这是你需要做的。将函数绑定到图像按钮的onclick=“”（无论您使用了什么）并将图像的id作为参数传递

onclick="add_fav('2')"

当用户单击它时，您的add_fav函数将很有趣，图像的id将作为参数发送。在函数内部，将此值发布到您最喜欢的.php

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

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

}

您可以使用

$id=$_POST['image_id'];

然后将其保存在数据库中，并回显一条成功消息。
只需添加一个答案即可避免使用POST或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
应该返回可以与现有页面交互的成熟JavaScript

以上只是几个愚蠢的例子，使用GET请求代替POST，这确实有好处，也有自己的缺点。这两个示例都不需要jQuery，我只是为了速度和清晰度而使用它

雨果的设计要优雅得多，但我提到这些只是为了证明AJAX不是唯一的方法。
只是为了添加一个答案，避免使用POST或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
应该返回可以与现有页面交互的成熟JavaScript

以上只是几个愚蠢的例子，使用GET请求代替POST，这确实有好处，也有自己的缺点。这两个示例都不需要jQuery，我只是为了速度和清晰度而使用它

雨果的设计要优雅得多，但我提到这些只是为了证明AJAX不是唯一的方法。
是的，你是对的。你需要AJAX来无声地保存记录……事实上，如果没有AJAX，你将无法做到这一点。我想网络上已经有足够多的教程介绍如何使用AJAX做到这一点。是的，您是对的。您需要ajax以静默方式保存记录…事实上，如果没有ajax，您将无法做到这一点。我认为web上有足够多的教程介绍如何使用ajax实现这一点。我建议保留表单，挂接.submit（）事件，并在成功提交时返回false。这样，在用户禁用Javascript的情况下，站点将优雅地降级（当然不太可能）。祝你好运。那最好。但是您的
favoriet.php
还必须知道AJAX调用和常规提交之间的区别，因为使用AJAX他可能会返回
JSON true
，而正常的请求是返回页面。但我认为这超出了这个问题的范围。我建议保留表单，挂接.submit（）事件，并在成功提交时返回false。这样，在用户禁用Javascript的情况下，站点将优雅地降级（当然不太可能）。祝你好运。那最好。但是您的
favoriet.php
也必须知道其中的区别