Php AJAX 不能与我的 php 脚本和 mysql 一起工作

Question

所以我在这里发布我的第一个 PHP 函数，我为之感到自豪，但我最近才了解 AJAX 并想对其进行测试。不幸的是，我无法让它工作。

---

我的经验： PHP（3 周）。 CSS3、HTML、基本 Javascript。

---

我的问题：让 AJAX 工作。我希望 ajax 从我的测试服务器（Xampp）数据库中获取投票的 php 文件中获取我的数据。所以每次用户点击好或坏的 AJAX 都应该在不刷新页面的情况下显示新的结果。然而问题是： A) 我的 if 语句通过检查 isset($_POST) 来工作，如果我通过 AJAX 调用它就不再工作了。 B) 防止刷新。 C) 每次点击后进行 AJAX 更新。我知道我快到了，我只是错过了一些东西，老实说我不知道​​到底是什么。

---

我尝试了什么：检查了我的数据库连接。检查我的 php 代码是否在没有 ajax 的情况下工作并且它做得非常好（为了简单起见，我在这里只显示了一半的功能，一个 lite 版本）。试图更改提交到按钮。缓存清除。 Jquery 在我的文档的头部，路径是正确的。观看了教程并阅读了文档，但我只是没有去任何地方，可能是由于缺乏经验。

编辑：会话和一切 php 工作正常。我的会话开始和数据库连接包含在最顶部。

---

总结：如何修复此 ajax 以便它始终更新我的数字？

---

如果您希望我解释我的部分 php 代码，请告诉我。如有必要，我愿意评论这些部分。

---

JQUERY / AJAX 代码

function vote() {
        var request = $.ajax({
            url: "php/core/voting_system.php",
            type: "POST",           
            dataType: 'html'
        });

        request.done(function(vote_sum) {
            $("#votes").html(vote_sum);         
        });
}

HTML 代码：

<div id='votes'></div>

<form id="good" action="" method="post">
    <input type="submit" name="good" onclick="vote()" value="+">
</form>

<form id="bad" action="" method="post">
    <input type="submit" name="bad" onclick="vote()" value="-">
</form>

Answer 1

在 HTML 中你不需要<form>，你用AJAX 来做，对吧？

<div id='votes'></div>
<button onclick="vote('good');">+</button>
<button onclick="vote('bad');">-</button>

在 JavaScript 中，使用 post 比使用 ajax 函数更容易

function vote(gb) {
  $.post("php/core/voting_system.php", { vote: gb }, function(vote_sum) {
    $("#votes").html(vote_sum);         
  });
}

在 PHP 中，提取投票并根据需要使用它（添加验证/清理）：

$vote = $_POST['vote']; // either 'good', or 'bad'
// do what you need with it

Answer 2

TL；DR 版本：

您没有在 $.ajax 调用中包含数据字段。此外，您的脚本不会检查按下了哪个按钮。

长版

当您执行$.ajax 呼叫时，您未能将任何数据附加到请求中。这可以像这样轻松完成：

  $.ajax({
    method: 'POST',
    dataType: 'json',
    data: ...someJSONData...
  });

通常，您会希望将 JSON 传递给任何东西，因为它可以包含您通常希望在客户端和服务器之间进行通信的复杂对象结构。你显然不在这个例子中，但如果你想学习这些东西，最好从正确的方式开始。

javascript 和 php 都让 JSON 格式的使用变得非常简单：JS JSON.stringify() 和 JSON.parse()，PHP json_encode() 和 json_decode()。

function vote(e) {
  // e.target.id stores the id of the button that was clicked
  var data = {vote: e.target.id}

  $.ajax({
    method: 'POST',
    dataType: 'json',
    data: JSON.stringify(data),
    ... callbacks and other properties ...
  });
}

document.getElementById("good").addEventListener("click", vote);
document.getElementById("bad").addEventListener("click", vote);

这将是一个简单的示例，说明如何解决您的问题。如果你在通过json_decode() 运行数据后在你的 php 脚本中做了一个简单的var_dump，你会得到一个很好的关联数组：

[
  'data' => 'good',
]

我希望这能说明以这种格式传递数据是多么容易。

还要注意我在 javascript 中定义了事件处理程序。这通常会更好，因为您将所有 javascript 保存在一个地方，这样可以让事情变得更清洁和更容易调试。

Answer 3

就像 Jay 说的那样，您不会通过 AJAX 发送 POST 数据。您还需要从 PHP 中回显您的结果。

function vote(event) {
     event.preventDefault();
     $.ajax({
         url: "php/core/voting_system.php",
         type: "POST",           
         dataType: 'html',
         data: 'bad='+$('input[name="bad"]').val()+'&good='+$('input[name="good"]').val(),
         success: function(data){
             var votes = $("#votes").val().empty();
             $("#votes").html(data+votes);
         }
    ]);
}