Отправить данные на страницу php с кнопки и опубликовать результаты

Question

Хорошо. Проблема в том, что я работаю над веб-сайтом, на котором вы можете легко проголосовать за или против определенного изображения / видео и т. Д. Теперь пришло время отправить запрос. Я могу обрабатывать большинство вещей php и так далее, я также могу делать запросы к базе данных; но как мне отправить запрос на мою страницу php? Я хочу, чтобы он отправлялся с главной страницы, и он будет делать это без обновления страницы. Кроме того, я попытался добавить его в "форму", пользователь нажимает кнопку, и она отправляется, но мне нужна переменная "id", добавленная с запросом. Теперь я знаю, что мне понадобятся jquery и Ajax, но у меня НЕТ CLUE, чтобы начать с этого. Вот что у меня есть для моей первой страницы:

<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!';