阿贾克斯最喜欢的按钮

Question

I want to make a favorite button with AJAX. I already wrote the PHP query, but I don't know how to make AJAX for it and connect it to my button.

I want something like favorite/unfavorite

$test = $_SESSION['ww'];
if (isset($_POST['submit']))    
{
  $x = $_SESSION['x'];
  $SelectQry2 = "select * from favorites where User_Id = ".$test." and User_Post = ".$x."";
  $slc = mysqli_query($link , $SelectQry2);

  if (mysqli_num_rows($slc)> 0)
  {
    $DeleteQry = "DELETE from favorites where User_Post = ".$x."";
    $del = mysqli_query($link , $DeleteQry);
  }
  else
  {
    $url = $_SERVER['REQUEST_URI'];
    $InsertQry = "insert into favorites";
    $InsertQry .="(`User_Id` ,`User_post`, `url`) VALUES";
    $InsertQry .=" ('$test' ,'$x', '$url')";
    $fav = mysqli_query($link, $InsertQry);
  }
}

if(isset($_GET['id']))
{
  $id = intval($_GET['id']);
  $SelectSql = " SELECT * , `upload_diy_ordinary`.`date` as datep FROM `users_final` LEFT OUTER JOIN `upload_diy_ordinary` ON `upload_diy_ordinary`.`User_ID`=`users_final`.`id` "; 
  $SelectSql .= " where `upload_diy_ordinary`.`ID` = $id";
  $result = mysqli_query($link, $SelectSql);

  while($row = mysqli_fetch_assoc($result))
  {
    $_SESSION['x'] = $row['id'];
    <form method="post">
      <input type="submit" name="submit" id="favorite" value="favorite" />
    </form>
  <?php }
} ?>

$(document).on('click', '#favorit', function(e) { 
  var data = $("#form").serialize(); 
  $.ajax({ 
    data: data, 
    type: "post", 
    url: "details.php", 
    success: function(data) { 
      alert("Data Save: " + data); 
    } 
  }); 
}); 

I'd appreciate it if you can help me

Answer 1

Some obvious problems I can see:

1) '#favorit' will not match any buttons because you missed an e off the end of the string.

2) Once this is working, it will post back your form because that's what a "submit" button does automatically. So you'll get a postback and possibly also a competing ajax request - not good. Write e.preventDefault(); as the first line of your click function to stop the regular postback from happening and allow your ajax to work.

3) You are writing out multiple buttons with the id "favourite". Multiple IDs are not allowed in HTML. Your "click" function will only ever match the first button, because all the others are considered invalid.

4) $("#form").serialize(); will also not work because you don't have any elements with the id "form".

I suggest doing the following:

1) Write your form code like this, with a class attribute so you can identify multiple instances of the form and bind event handlers to them all (unlike IDs, you can repeat the same class name on as many elements as you like):

<form class="favourite-form" method="post">
  <input type="submit" name="submit" value="favorite" />
</form>

2) Bind your event handler to the form's submit event, instead of the submit button's click event. Then you can easily serialise the form.

$(document).on('submit', '.favourite-form', function(e) { 
  e.preventDefault(); //prevent a normal postback and allow ajax to run instead
  var data = $(this).serialize(); //"this" represents the form element in this context
  $.ajax({ 
    data: data, 
    type: "post", 
    url: "details.php", 
    success: function(data) { 
      alert("Data Save: " + data); 
    },
    error: function(jqXHR, textStatus, errorThrown) //gracefully handle any errors in the UI
    {
      alert("An ajax error occurred: " + textStatus + " : " + errorThrown);
    }
  }); 
}); 

Please also note my comment above re your serious vulnerability to SQL Injection attacks, which is a separate issue you should consider fixing urgently.