从按钮将数据发送到 php 页面并发布结果

Question

好的。问题是我正在一个网站上工作，您可以轻松地对某个图像/视频等进行投票或否决。现在出现的事情是发送请求。我可以处理大多数 php 的东西等等，我也可以做数据库请求；但是，如何向我的 php 页面发送请求？我希望它从主页发送，它会在不刷新页面的情况下完成。另外，我尝试将其添加到“表单”中，用户单击按钮并提交，但我需要在请求中添加“id”变量。现在，我知道我需要一些 jquery 和 Ajax，但我不知道要从那个开始。这是我的第一页：

<form action="vote.php">
<input type="image" src="imgs/1.png" name="1" alt="<?php echo $sub; ?>" />
<input type="image" src="imgs/2.png" name="2" alt="NOT" />
<input type="text" value="<?php echo $id; ?>" name="id" hidden />
</form>

现在，投票页面：

<?php

require_once('inc/dbConnect.php');

if (empty($id)) {
  $error = "Which photo to vote?"
}

// Receive vote count, is it UP or DOWN?
// save in variable
// do a check and add it to database, <- I can do this part.  
?>

Answer 1

HTML：

<form action="vote.php">
<button type="button" name="vote" value="up">Upvote</button>
<button type="button" name="vote" value="down">Downvote</button>
<input type="hidden" name="image" value="filename_or_unique_id_of_img.jpg">
</form>

jQuery:

form.find('button').on('click',function(){
  var form,url,data;    
      form = $('form');
      url = form.attr('action');
      data = 'voted='+$(this).val()+'&image='+image;

  $.ajax({
    url:url,
    data:data,
    type:'POST',
    success:function(data){
      alert(data) //'Thanks for voting!'
    }
  })

})

PHP：

$vote = $_POST['vote'];
$image = $_POST['image'];
//stuff with database
echo 'Thanks for voting!';