javascript - Ajax POST 工作，但 php 文档无法获取数据变量

Question

当我发布某些内容时，chrome 的网络选项卡显示该帖子正在使用正确的变量进行处理，但在 php 端，POST 全局为空，并且由于某种原因页面上的方法是 GET。我希望我不只是错过了一些明显的东西，我花了大约 4-5 个小时进行故障排除。发生的情况或假设的情况是，当您在搜索框中键入任何内容时，js 文件中的事件监听器会触发并将搜索框的值 POST 到 storepage.php 的 php。搜索栏本身实际上位于一个单独的 php 文件中，该文件为每个 html 页面创建一个 header ，但是查询数据库的 php 位于 storepage.php 中

将项目输入搜索后的网络结果图片(注意图像底部的变量 searchInput)

这是 Ajax POST 发生的地方:searchItUp.js

$(document).ready(function() {
    console.log("Document Ready. Listening for search bar key presses...");
    $('.SearchBar').keyup(function() {     
        console.log("Key pressed.");
        var searchBoxValue = document.getElementById('superSearcher').value;
        console.log("Current searchbox value: " + searchBoxValue);
        jQuery.ajax({
            method: "post",
            url: "storepage.php",
            data: {searchInput: searchBoxValue},
            datatype: "text",

            success: function () {
                console.log("Ajax functioning properly...");
                $('.content').load(document.URL +  ' .content>*');
            },
            error: function() { 
                console.log("Ajax NOT functioning properly...");
            }
        });
    });
 });

接下来是 php 文档 (storepage.php) 的部分，其中包含 javascript 文件，并且 POST 被定向到。

if (isset($_POST["searchInput"]) && !empty($_POST["searchInput"])) {
        echo "searchInput is set...  ";    
    } else {  
        echo "searchInput is not set...  ";
    }
    echo $_SERVER['REQUEST_METHOD'];
    $searchInput = $_POST['searchInput'];
    if ($searchInput=="") {
                // query all game information based on text in the search bar
                $query = "SELECT ProductID,ImgID,Image,GameName,ESRB_ID,ESRB_Img,Rating,ReleaseDate,Description,Tags,Price,PlatformID,PlatformName 
                    FROM PRODUCTS 
                    JOIN PRODUCT_IMAGES USING (ImgID) 
                    JOIN GAME_INFO USING (GameID) 
                    JOIN PLATFORMS USING (PlatformID)
                    JOIN ESRB USING (ESRB_ID)";
                $statement = $db->prepare($query);
                $statement->execute();
                $GameList = $statement->fetchAll();
                $statement->closeCursor();
                echo "<script>console.log( 'Game database queried WITHOUT search' );</script>";
            }
            else {
                // query all game information if search is empty
                $query = "SELECT ProductID,ImgID,Image,GameName,ESRB_ID,ESRB_Img,Rating,ReleaseDate,Description,Tags,Price,PlatformID,PlatformName 
                        FROM PRODUCTS 
                        JOIN PRODUCT_IMAGES USING (ImgID) 
                        JOIN GAME_INFO USING (GameID) 
                        JOIN PLATFORMS USING (PlatformID)
                        JOIN ESRB USING (ESRB_ID)
                        WHERE GameName LIKE '%$searchInput%'";
                $statement = $db->prepare($query);
                $statement->execute();
                $GameList = $statement->fetchAll();
                $statement->closeCursor();
                echo "<script>console.log( 'Game database queried WITH search' );</script>";
            }

我已经尝试了网上能找到的所有方法，并且可能查看了所有相关的 stackoverflow 和其他帖子，但我一辈子都无法弄清楚。

Answer 1

您调用该脚本两次。首先使用 $.ajax，您将在其中发送搜索参数。

然后在 success: 函数中，使用 $('.content').load 再次调用它。这会发送一个不带搜索参数的 GET 请求。因此它不会在 .content 中显示搜索结果。

AJAX 请求应该返回您想要显示的任何内容。然后你可以这样做:

success: function(response) {
    $(".content").html(response);
}

另一种选择是在调用.load时传递参数。这会将其更改为 POST 请求:

$(document).ready(function() {
  console.log("Document Ready. Listening for search bar key presses...");
  $('.SearchBar').keyup(function() {
    console.log("Key pressed.");
    var searchBoxValue = document.getElementById('superSearcher').value;
    console.log("Current searchbox value: " + searchBoxValue);
    $('.content').load(document.URL + ' .content>*', {
      searchInput: searchBoxValue
    });
  });
});