Javascript ajax收藏夹按钮

我想用AJAX制作一个最喜欢的按钮。我已经编写了PHP查询，但我不知道如何为它制作AJAX并将其连接到我的按钮

我想要喜欢/不喜欢的东西

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

---

如果您能帮我解决一些我能看到的明显问题，我将不胜感激：

1）

“#favorit”

将不匹配任何按钮，因为您错过了字符串末尾的

e

2） 一旦这起作用，它将发回您的表单，因为“提交”按钮会自动执行此操作。因此，您将收到一个回发，可能还会收到一个与之竞争的ajax请求——这不太好。写

e.preventDefault（）

作为单击函数的第一行，用于停止常规回发并允许ajax工作

3） 您正在写入多个id为“收藏夹”的按钮。HTML中不允许有多个ID。您的“单击”功能将只与第一个按钮匹配，因为所有其他按钮都被视为无效

4）

$（“#表单”）.serialize（）也将不起作用，因为您没有任何id为“form”的元素

我建议采取以下措施：

1） 使用class属性编写表单代码，这样您就可以识别表单的多个实例并将事件处理程序绑定到所有实例（与id不同，您可以在任意多个元素上重复相同的类名）：

请注意我在上面的评论——你对SQL注入攻击的严重脆弱性，这是你应该考虑的一个单独的问题。
你的SQL查询很容易受到注入攻击。恶意用户输入很容易损坏、窃取甚至破坏您的数据。请学习使用参数化查询和准备好的语句来更好地保护自己。这不难做到，而且是一个好习惯。有一个很好的（有趣的）风险解释，还有一些PHP/mysqli的代码示例，说明如何安全地编写查询。我真的不太了解ajax，我只知道我写的是ajax的基本形式，可以帮助我运行ajax。我真的不太了解ajax，我只知道我所写的是ajax的基本形式，它可以帮助我运行ajax。有没有一种方法可以像使用标记一样执行相同的操作？因此，与其使用submit类型的输入，它只是一个锚定标记，用户单击它而不重新加载，那么如何获得按钮的值呢？@ChrisJamal我猜，但为什么？这只会让编写代码变得更加困难。如果你想让用户认为你有一个超链接，那么使用CSS使按钮看起来像一个超链接。但是当他们点击它时，他们可能会对它的行为感到惊讶。使用一种类型的接口元素来完成通常由另一种元素完成的不同工作不是一个好主意
<form class="favourite-form" method="post">
  <input type="submit" name="submit" value="favorite" />
</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);
    }
  }); 
});