jQuery AJAX 不会将变量数据发送到 PHP 脚本

Question

我正在尝试为我网站上的帖子创建排序/排序机制，按最新或最热门排序。我的 frontpage.php 上有一个 HTML <select> 元素，它通过 jQuery onChange 触发以将选定的选项值保存到变量中。然后它使用所选选项的值对文件 feed.php 运行 GET 请求。这现在没有显示任何东西。错误：Notice: Undefined index: order 在 feed.php 文件中。

<select id="order">
  <option value="published">Newest</option>
  <option value="votes">Hottest</option>
</select>

检查更改然后将选择的#order childs 值保存在变量selected 中的jQuery。

$('#order').change(function() { 
    var selected = $(this).children("option:selected").val();
    $.ajax({
        type: 'GET',
        data: {order: selected},
        url: '../../php/includes/posts/feed.php'
    });
});

然后我有 PHP 脚本 (feed.php)，它输出带有 while 循环的帖子（不包括在这个问题中。）while 循环按其他方式工作。我想异步更改 SQL 表的顺序。

$order = $_GET['order'];
if(isset($order)) {
    $sql = "SELECT * FROM posts ORDER BY '$order' DESC LIMIT 0, 5";
    $results = $conn->query($sql);
    // The php script continues but it works as it should without the code above of course.

这可能是因为 $order 在使用 feed.php 之前没有保存？

编辑：

这是 feed.php 的完整代码我现在已经更改了 bth feed.php 的代码和我的 jQuery 脚本以包含给定的更改

    if(isset($order)) {
    $order = $_GET['order'];
    $sql = "SELECT * FROM posts ORDER BY `$order` DESC LIMIT 0, 5";
    $results = $conn->query($sql);

    if ($results->num_rows > 0) {
        while($row = $results->fetch_assoc()) {
            $postID = $row['postID'];
            $author = $row['author'];
            //$img    = $row['fileName'];

            $published   = strtotime($row['published']);

            echo '
            <div class="post"> 
                <div class="post__head">
                    <div>
                        <h6>'.$row['title'].'</h6>
                        <p> <i class="far fa-user"></i> '.$author.'</p>
                        <p> <i class="far fa-clock"></i> '.date("j.n.Y - H:i:s", $published).'</p>
                    </div>

                    <div class="post__votes">
                        <p>'.$row['votes'].' Votes</p>
                        <i data-id="'.$postID.'" class="fas fa-arrow-up -upvote"></i>
                        <i data-id="'.$postID.'" class="fas fa-arrow-down -downvote"></i>
                    </div>
                </div>

                <div class="post__body">
                    <div class="post__img">

                    </div>

                    <p>'.$row['message'].'</p>

                    <div class="post__comments">
                        <p>Comments</p>';

                        $sqlComments     = "SELECT * FROM comments WHERE comments.postID = $postID"; // Loop through all comments for a given post
                        $resultsComments = $conn->query($sqlComments);

                        if($resultsComments->num_rows > 0){
                            while($row = $resultsComments->fetch_assoc()) {
                                echo $row['comment'] . '<br>';
                            }

                        } else {
                            echo 'No comments yet...';
                        } 
                    echo' 
                    </div>   
                </div>

                <div class="post__footer">';
                    if(isset($_SESSION["loggedin"])) {
                        $role = $_SESSION['role'];

                        if($role == 'admin' || $role == 'editor' || $author == $_SESSION['username']) { # Edit posts only if logged in and as a either admin, editor or as the user who created the post
                            echo '
                            <button type="button" class="post__editBtn" data-id="'.$postID.'">Edit <i class="fas fa-pencil-alt"></i></button> 
                            <button type="button" class="post__commentBtn" data-id="'.$postID.'">Comments <i class="fas fa-comments"></i></button>';
                        }

                        if($role == 'admin' || $author == $_SESSION['username']) { # Delete posts only if logged in as a admin or the author of the post
                            echo'
                            <form method="post"> 
                                <input type="hidden" value="'.$postID.'" name="post__deleteHidden">
                                <button name="post__deleteBtn">Delete <i class="far fa-trash-alt"></i></button>
                            </form>';
                        }
                    } 
                echo'</div>
            </div>';
        }

        echo ' 
        <div class="overlay-edit">
            <p>Editing </p>
            <form method="post" action="../../php/includes/posts/editPost.php" class="post__edit">
                <input type="text" name="postTitle" placeholder="Edit title">
                <textarea name="postMsg" maxlength="255" placeholder="Edit message"></textarea>
                <button type="submit">Edit Post</button>
                <button type="button" class="post__edit-close">Close</button>
                <input type="hidden" name="post__editHidden" value="">
            </form>
        </div>';

        echo'
        <div class="overlay-comment">
            <form method="post" action="../../../php/includes/posts/createComment.php" class="post__comment">
                <textarea name="comment" maxlength="255" placeholder="Comment"></textarea>
                <button type="submit">Submit comment</button>
                <button type="button" class="post__comment-close">Close</button>
                <input type="hidden" name="post__commentHidden" value="">
            </form>
        </div>';

        if(isset($_POST['post__deleteBtn'])) { # Delete a post
            $conn->query("DELETE * FROM posts WHERE postID = ".$_POST['post__deleteHidden']."");
        }

    } else {
        echo '<p>No posts to show...</p>';
    }
}

$conn->close();
?>

Answer 1

对于选择列表，我会添加一个Select order 选项

<select id="order">
  <option value="none">Select order</option>
  <option value="published">Newest</option>
  <option value="votes">Hottest</option>
</select>

然后我会检查所选选项是否与默认选项不同

$('#order').change(function() { 
    var selected = $(this).children("option:selected").val();
    if(selected != "none") {
      $.ajax({
        type: "get",
        url: "../../php/includes/posts/feed.php",
        data: { 
          order: selected
        },
        success: function(response) {
          //Do Something
        },
        error: function(xhr) {
          //Do Something to handle error
        }
      });
    }
});

确保feed.php的网址正确。

运行feed.php 脚本并确保它返回结果。

Answer 2

你不需要获取选项的值，而是获取选择的值

$('#order').change(function() { 
    var selected = $(this).val(); // change to select val, not children
    $.ajax({
        type: 'GET',
        data: {order: selected},
        url: '../../php/includes/posts/feed.php'
    });
});

Answer 3

前言：我是服务器端编码器，不是 JS/jQuery，所以这个答案是针对那个的。

您收到未定义索引通知，因为您需要将$order = $_GET['order']; 放在条件语句中。另外，删除ORDER BY 中列名周围的引号。要么删除它们，要么使用刻度。

if(isset($order)) {

$order = $_GET['order'];

$sql = "SELECT * FROM posts ORDER BY $order DESC LIMIT 0, 5";
$results = $conn->query($sql);

} else {
  echo "It is not set.";
 }

带有刻度：

$sql = "SELECT * FROM posts ORDER BY `$order` DESC LIMIT 0, 5";

您对 SQL 注入持开放态度，因此请使用准备好的语句。

在您的 PHP 文件顶部使用以下内容启用 PHP 错误报告：

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

mysqli_error($conn) 用于查询。

补充说明：DELETE * FROM posts 在 MySQL 中删除行的语法不正确。 *（星号）不应该是 DELETE 的一部分；它仅用于SELECT 语句。

另外，我的一位同事告诉我，您应该在 AJAX 函数中使用 POST 而不是 GET。