Использование jQuery и Ajax для захвата и отправки параметров в href

Question

У меня следующий HTML код ссылки

<div id="message"></div>
<a href="cats.php?id=60&color=brown&name=kitty" id="petlink">
Click here
</a>

с использованием jQuery и Ajax и при нажатии на эту ссылку я хотел бы отправить эти параметры

id=60
color=brown
name=kitty

в файл find.php, который перехватит эти параметры, используя $_GET как

<?PHP
    $id    = $_GET['id'];     // 60
    $color = $_GET['color']; // brown
    $name  = $_GET['name']; // kitty

// doing some searching in database

echo "yep found it"; // or whatever i would print
?>

и ответит тем же (например, echo "yep found it"), который будет отображаться между этими div <div id="message"></div>

Я прочитал много уроков, но все говорили о подаче данных формы, но, к сожалению, я не нашел такого случая, поэтому любая помощь действительно подойдет.

Answer 1

как печально, вам нужно дать событие click для вашего тега, затем

$('#petlink').click(function(e) {
e.preventDefault();

 $.ajax({
  type:'POST'
  url: 'find.php&pets=1',
  data: this.href.split('?')[1],
dataType:'json',
  success: function(response) {
    $('#message').text(response);
   }
  });
 });

в вашем php-файле просто добавьте

if ($ _ GET ['pets'] ==1) {

 $id    = $_POST['id'];     // 60
  $color = $_POST['color']; // brown
  $name  = $_POST['name']; // kitty
  echo 'pets came';
  exit;

}

Answer 2

Чтобы создать это, вам просто нужно отправить запрос AJAX из события click элемента a.Вы можете получить строку запроса, прочитав свойство src якоря, что-то вроде этого:

$('#petlink').click(function(e) {
  e.preventDefault();

  $.ajax({
    url: 'find.php',
    data: this.src.split('?')[1],
    success: function(response) {
      $('#message').text(response);
    }
  });
});