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 发布到 favouriet.php 并在 favouriet.php 中运行脚本，该脚本使用发布的值辅助会话用户 ID 将其插入数据库。一切正常，但我不希望在屏幕中打开页面 favouriet.php。

我认为需要 jQuery/ajax，不确定。

4

3 回答 3

5

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

favoriet.php下面的代码将使用存储在属性中的 IDdata-id提交一个 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>

附带说明：替代文字应该说明图像的一些内容。因此，如果图像是 twitter 徽标，我会使用“twitter”作为替代文本。这将为搜索引擎创建更好的索引。

submit button如果页面上只有一个图像并且其目标是提交完整的表单，则alt of很有用。您要提交的是“我点击了 twitter 按钮”，所以我的用户必须知道它包含 twitter 徽标。

于 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，以便它可以src使用简单的readfile方法返回指定的图像，并且创建一个favoriet-fallback.php虽然不是 100% 必要的，但它会很好。

脚本/图像标签注入

您还可以注入新的脚本或图像标签来执行您的请求。

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

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

Hugo 的设计要优雅得多，但我只提到这些只是为了证明 AJAX 不是唯一的方法。

于 2013-03-12T11:41:05.520 回答
0

是的，你是对的，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
    }});

}

您可以使用以下方法检索 favouriete.php 中的值

$id=$_POST['image_id'];

然后将其保存在数据库中并回显成功消息。

于 2013-03-12T11:13:21.017 回答