Question

我有一个带图片的页面。在图像上是一个有利于图像的按钮。如果他们点击按钮我有一个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插入到数据库中。一切正常，但我不希望页面aptiet.php在屏幕上打开。

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

Answer 1

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

下面的代码会向favoriet.php提交一个POST请求，其中包含data-id attibute中存储的ID

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

在旁注：alt文本应该说明图像。因此，如果图像是推特标识，我会使用“推特”作为替代文字。这将为搜索引擎创建更好的索引。

如果页面上只有一个图片，其目标是提交完整的表单，则submit button的alt非常有用。你要提交的是“我点击了推特按钮”，所以用户必须知道它包含推特标识。

Answer 2

只是添加一个避免需要发布或AJAX的答案，以表明这可以在没有这个的情况下完成。

图像标记通信

您可以使用image标记与服务器进行通信：

<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中指定的图片，最好创建一个{ {1}}虽然不是100％必要的。

脚本/图像标记注入

您还可以注入新的脚本或图片代码来执行请求。

favoriet-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>应该返回可以与现有页面交互的完全成熟的JavaScript。

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

Hugo的设计更加优雅，但我只是提到这些只是为了证明AJAX不是唯一的方式。

Answer 3

是的，你是对的，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'];

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

发布用img隐藏的php脚本

3 个答案:

图像标记通信

脚本/图像标记注入