通过单击按钮将数据从 AJAX 发送到 php 脚本

Question

所以简而言之，我试图使用 html 按钮在我的待办事项网站上创建一个弹出更新面板。现在我已经有了一个登录注册系统，它通过 mysql 查询为每个用户显示不同的表。

现在这些更新按钮包含通过查询生成任务时创建的“TaskId”值，这些 id 将用于查询数据以显示在弹出面板上。我想使用 AJAX 来传递该数据，当您单击按钮时，它会弹出面板，然后将值（即任务 ID）发送到 php 脚本“dashboard.php”。但是，php脚本似乎无法接收它。

为了诊断它，我在 javascript 文件中记录了该值，并且它能够显示 TaskId 的值。我在开发工具中检查了网络，它正在发送。我检查了名称和语法。然而它仍然不起作用。注意：这些文件位于同一文件夹中。

这是表中任务生成的代码（dashboard.php）

                <?php
                    //CHECKS IF USER HAS ANY ONGOING TASK, 
                    $todoQuery = "SELECT * FROM todo_tbl where user_id = '$userID'";
                    $toDo = mysqli_query($conn, $todoQuery);
                    if (mysqli_num_rows($toDo) > 0) {
                        while ($row = mysqli_fetch_assoc($toDo)) {
                            // Gets each row 
                            $taskId = $row['task_id'];
                            $taskName = $row['task_name'];
                            $taskDate= $row['due_date'];
                            $taskStatus = $row['task_status'];

                            echo "<tr>";
                            echo   "<td> $taskName</td>";
                            echo   "<td> $taskDate </td>";
                            echo   "<td> $taskStatus </td>";
                            echo  "<td><button class='updateBtn' value='$taskId'>Update</button></td>";
                            echo  "<td><button class='deleteBtn' value='$taskId'>Delete</button></td>";
                            echo "</tr>";
                        }
                    }
                
                ?>

Javascript代码（dashboard.js）：

//using JQUERY

$(document).ready(function() {

  //Reveal Update Panel and AJAX request
      $('.updateBtn').click(function() {
        var updTaskId = $(this).val();
        console.log(updTaskId);
        $.ajax({
            url: 'http://localhost/try/to_do_Website/dashboard.php',
            method: 'POST',
            data: { updTaskId: updTaskId },
            success: function(response) {
                // Handle the response and perform any necessary actions
            },
            error: function(xhr, status, error) {
                console.log('AJAX Error:', error);
            }
        });
});

最后是应该接收数据的同一文件中的代码（dashboard.php）：

             <!--retrieves task id from ajax request above and displays it on the input boxes-->
                    <?PHP
                        if (isset($_POST['updTaskId'])) {
                          $updTaskId= $_POST['updTaskId'];
                          echo $updTaskId;
                          $viewQuery = "SELECT * FROM todo_tbl where task_id = '$updTaskId'";
                          $view = mysqli_query($conn, $viewQuery);
                                $row = mysqli_fetch_assoc($view);
                                $updtaskName = $row['task_name'];
                                $updtaskDate = $row['due_date'];
                                $updtaskStatus = $row['task_status'];
                                var_dump($row);
                        }
                     ?>

Answer 1

您的 JavaScript 和 PHP 代码看起来大部分是正确的，但我建议您检查一下：

1. 检查控制台是否有错误

2. 在AJAX请求中使用相对URL：

   • 由于您的文件位于同一文件夹中，因此您可以在 AJAX 请求中使用相对 URL。将 AJAX 调用中的

     url

     参数更改为

     'dashboard.php'

     而不是完整的 URL。

   $.ajax({
       url: 'dashboard.php', // Change the URL
       method: 'POST',
       data: { updTaskId: updTaskId },
       success: function(response) {
           // Handle the response and perform any necessary actions
       },
       error: function(xhr, status, error) {
           console.log('AJAX Error:', error);
       }
   });
   

3. 在AJAX请求中添加Content-Type标头：

   • 显式设置

     Content-Type

     标头以确保服务器正确解释数据。

   $.ajax({
       url: 'dashboard.php',
       method: 'POST',
       data: { updTaskId: updTaskId },
       contentType: 'application/x-www-form-urlencoded; charset=UTF-8', // Add this line
       success: function(response) {
           // Handle the response and perform any necessary actions
       },
       error: function(xhr, status, error) {
           console.log('AJAX Error:', error);
       }
   });
   

4. 调试 PHP 代码：

   • 使用

     var_dump

     或

     echo

     语句调试

     dashboard.php

     中的PHP代码。确保满足

     if (isset($_POST['updTaskId']))

     条件。