我有一个带有图像的页面，在图像上是一个按钮来喜欢图像。如果他们点击按钮，我有一个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发布到favorieet .php中，并在favorieet .php中运行脚本，使用发布的值aid和会话用户id将其插入数据库中。一切正常，但我不希望页面favorie .php在屏幕上打开。
我认为需要jQuery/ajax，不确定
我要做的是向img favimg添加一个类，然后添加另一个名为data-id的属性，该属性持有id。然后你可以直接在图像上使用jQuery，而不需要表单。
下面的代码将向favoriet.php提交POST请求，其ID存储在data-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文本应该说明图像的一些内容。所以如果图片是twitter的logo，我会使用'twitter'作为alt文本。这将为搜索引擎创造一个更好的索引。
如果页面上只有一个图像，并且它的目标是提交完整的表单，那么submit button的alt是有用的。你想提交的是"我点击了twitter按钮"，所以我用户必须知道它包含twitter徽标。
只是为了添加一个答案，避免了张贴或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，以便它可以使用简单的readfile方法返回src中指定的图像，并且创建favoriet-fallback.php也很好，尽管它不是100%必需的。
script/image标签注入
你也可以注入一个新的脚本或图像标签来执行你的请求。
<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不是唯一的方法。
是的，您是对的，Ajax是必需的。Jquery是javascript的框架。
回到你的问题。
这是你需要做的。将函数绑定到图像按钮的onclick="(无论您使用的是什么)，并将图像的id作为参数传递。
onclick="add_fav('2')"
当用户点击它时，你的add_fav函数将启动，图像的id将作为参数发送。在函数内部，将此值发送到您的favorites .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'];
然后将其保存在数据库中并回显成功消息