Javascript 使用Ajax查询SQL而不刷新页面

目标：使用Ajax查询SQL而不刷新页面

我有喜欢/不喜欢的按钮，可以完美地作为表单和提交输入，但是表单会刷新页面

我不知道如何进行Ajax调用，通过class/id div单击或按钮将我的'liker.php'（如下）连接到我的主页中进行操作

$.ajax({
  type: "POST",
  url: "liker.php",
  data: ???
  success: ???
  ...............

我读过一些教程并寻找答案，但我仍然感到困惑

liker.php：

//LIKE FIELD
if (isset($_POST['like'.$id])) {
  if (!in_array("$id", $like_explode)) {
    if (!in_array("$id", $dislike_explode)) {
      mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
    }
    else
    {
      $new_dislike_string = str_replace(",$id", '', $dislike_string);
      mysqli_query($db, "UPDATE likes SET pid_dislike='$new_dislike_string' WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE likes SET pid_like=CONCAT(pid_like,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes+1) WHERE id='$id'");
      mysqli_query($db, "UPDATE comments SET dislikes=(dislikes-1) WHERE id='$id'");
    }
  }
}
//DISLIKE FIELD
if (isset($_POST['dislike'.$id])) {
  if (!in_array("$id", $dislike_explode)) {
    if (!in_array("$id", $like_explode)) {
      mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET likes=(dislikes+1) WHERE id='$id'");
    }
    else
    {
      $new_like_string = str_replace(",$id", '', $like_string);
      mysqli_query($db, "UPDATE likes SET pid_like='$new_like_string' WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE likes SET pid_dislike=CONCAT(pid_dislike,',$id') WHERE user_id='$user_id'");
      mysqli_query($db, "UPDATE comments SET dislikes=(dislikes+1) WHERE id='$id'");
      mysqli_query($db, "UPDATE comments SET likes=(likes-1) WHERE id='$id'");
    }
  }
}
//LIKE-DISLIKE FIELD END

---

试着这样做：

$("#likeButtonID").click( function()
{
     $.ajax({  
        type: "POST",  
        url: "liker.php",  
        data: { like: $(this).val(); },
        success: function(result) {
            alert('Ajax Success Ran');
        }
   });
});

---

或者，如果页面上有许多相似的按钮，则可以在每个按钮上执行jquery循环

我将向您解释如何将ajax与jquery结合使用。我不完全理解它是如何工作的$\u POST variables，但我希望能对您有所帮助

首先使用一个类来知道何时单击了元素like/loke。 第二，使用一个名字来知道是喜欢还是不喜欢

例如：

<a href="ID" class="classForLikeOrDislike" name="like">Like</span>

*使用href按锚定标记更新更改范围标记

更新以回答上面的“仅单击”问题

事件变量必须传递给匿名函数

<script>
function chk(event) 
{
    // Prevent trigger submit and reload page
    event.preventDefault();
    var name=document.getElementById('clicker'); 
    $.ajax({
          type:"post",
          url: "clicky.php",
          data: {clicker:1} , <--- here goes the data that you want to send to your php file,  in this case SEND $_POST['clicker'] with value 1
          cache: false,
          success: <-- When is success your request, whats you want to make (other code) maybe print 'OK'
    }); 
}
</script>


<?php 
  if(isset($_POST['clicker'])) 
  { 
      mysqli_query($db,"UPDATE items SET this='that' WHERE number='1'")
  }
?>

功能chk（事件）
{
//防止触发器提交和重新加载页面
event.preventDefault（）；
var name=document.getElementById（'clicker'）；
$.ajax({
类型：“post”，
url:“clicky.php”，
数据：{clicker:1}，
WebMethod
让ajax调用像webservice一样，不处理响应，返回json/xml格式的类（或者什么都不做，只在服务器上执行操作）

在AspNet中非常简单，如果有帮助，请尝试此方法

关于
post html snippet Pleaseeeeeee我相信你可以通过谷歌找到很多例子，这并不难。数据将是标识符，即是喜欢还是不喜欢。这可以根据你的意愿完成。使用bool、int甚至字符串。成功回调将是你只需更新喜欢/不喜欢的数量。因为我是不知道如何使用Ajax，我只是像这样与php通信：：（谢谢脚本，我会继续查找。你能给我一个如何编写“数据”“成功”的示例吗放弃我的php文件？我相信有人会写一个例子。我现在在移动设备上，所以这会很困难。我会试一试！谢谢！对ID属性使用相同的名称是一种不好的做法。我会说这不仅仅是一种不好的做法。在尝试操作DOM时，它可能会导致脚本出错。谢谢所有的建议，我有很多建议e最后一个问题。我正在使用ajax正确地查询我的数据库，但是我的$likes php变量在没有重新加载页面的情况下不会更新-有什么想法吗？你真的在想要的元素中设置了新的ajax数据吗？谢谢！我会尝试一下
$(".classForLikeOrDislike").click(function(){

    // Get the varible ID, to send to your php
    var id = $(this).attr('href');

    // Get the varible name, to send like or dislike
    var l = $(this).attr('name');


    $.post({url: "liker.php", {id: id}, success: function(result){
        // do some code here
        // here yo can see 'result' response of liker.php
        // console.log(result);
    }});

});

<script>
function chk(event) 
{
    // Prevent trigger submit and reload page
    event.preventDefault();
    var name=document.getElementById('clicker'); 
    $.ajax({
          type:"post",
          url: "clicky.php",
          data: {clicker:1} , <--- here goes the data that you want to send to your php file,  in this case SEND $_POST['clicker'] with value 1
          cache: false,
          success: <-- When is success your request, whats you want to make (other code) maybe print 'OK'
    }); 
}
</script>


<?php 
  if(isset($_POST['clicker'])) 
  { 
      mysqli_query($db,"UPDATE items SET this='that' WHERE number='1'")
  }
?>