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

【问题标题】：Query SQL without refreshing the page using Ajax使用Ajax查询SQL而不刷新页面
【发布时间】：2015-07-27 05:58:36
【问题描述】：

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

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

我不知道如何进行连接我的“liker.php”（如下）的 Ajax 调用，以便通过类/id div 单击或按钮在我的主页中操作。

$.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

【问题讨论】：

post html sn-p pleaseeee
我相信你可以通过谷歌找到很多例子，这并不难。数据将是标识符，即它是喜欢还是不喜欢。这可以随心所欲地完成。使用 bool、ints 甚至是字符串。成功回调将是您只需更新喜欢/不喜欢的数量的地方。
由于我不确定如何使用 Ajax，所以我只是像这样与 php 通信：
:(
感谢脚本，我会继续寻找。你能给我一个例子，说明如何用我的 php 文件编写“数据”“成功”部分吗？
我相信有人会写一个例子。我现在正在使用移动设备，所以会很困难。

标签： javascript php jquery ajax

【解决方案1】：

我将向您解释如何在 jquery 中使用 ajax。我不明白 $_POST 变量的所有工作原理，但希望对您有所帮助。

首先使用一个类来知道何时单击了喜欢/不喜欢的元素。其次使用名称来判断是喜欢还是不喜欢。

喜欢的例子：

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

不喜欢：

<a href="ID" class="classForLikeOrDislike" name="dislike">Dislike</span>

埃阿贾克斯

$(".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);
    }});

});

*通过带有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'")
  }
?>

【讨论】：

我试试看！谢谢！
对 ID 属性使用相同的名称是一种不好的做法。
我想说这不仅仅是不好的做法。尝试操作 DOM 时可能会导致脚本出错。
感谢所有建议，我还有最后一个问题。我正在让 ajax 正确查询我的数据库，但是如果没有重新加载页面，我的回显 $likes php 变量不会更新 - 有什么想法吗？
你是否真的在你想要的元素中设置了新的Ajaxed数据？

【解决方案2】：

试试这样的：

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

或者，如果您在页面上有许多类似按钮，您可以对每个按钮执行 jquery 循环。

【讨论】：

谢谢！我试试看

【解决方案3】：

WebMethod 让 ajax 调用像 web 服务一样，没有响应被处理，json/xml 格式的类正在返回（或者什么都没有，只是在服务器上执行操作）

在 AspNet 中很简单，如果有帮助，试试这个 PHP Equivalent to Authorized ASP.NET WebMethod (AJAX)?

问候

【讨论】：