使用jQuery和Ajax在href中捕获和发送参数

Question

I've the following HTML link code

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

using jQuery and Ajax and On click this link, I would like to send those parameters

id=60
color=brown
name=kitty

to a file find.php that will catch those parameters using $_GET as

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

and will respond back with whatever (like echo "yep found it" ) that would be shown up in between this div <div id="message"></div>

I've read many tutorials but all was speaking about form data submissions but unfortunately i did not found for such case so any help will really appropriate it.

Answer 1

To create this you simply need to send an AJAX request from the click event of the a element. You can retrieve the querystring by reading the src property of the anchor, something like this:

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

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

Answer 2

as rory sad you need to give a click event to your a tag then

$('#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);
   }
  });
 });

on your php file just add

if($_GET['pets'] == 1) {

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

}