Ajax POST工作正常，但是php文檔無法獲取數據變量

Question

當我發布內容時，chrome的網絡標簽顯示發布使用正確的變量，但是在php端，POST全局為空，並且出於某種原因該頁面上的方法是GET。 我希望我不僅僅是想念一些明顯的事情，我花了大約4-5個小時進行故障排除。 發生或假定發生的情況是，當您在搜索框中鍵入任何內容時，js文件中的事件偵聽器將觸發並把搜索框的值發布到storepage.php的php中。 搜索欄本身實際上位於一個單獨的php文件中，該文件為每個html頁面創建一個標題，但是查詢數據庫的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
    });
  });
});