AJAX POST 錯誤 404（未找到）使用 javascript,mysql,php

Question

我正在嘗試創建一個實時搜索欄，我可以在其中鍵入名稱並從我的數據庫中獲取結果。

這是我的項目結構：

我正在使用的文件是 map.js，其中我有 ajax 電話。 我的兩個 php 文件，一個用於 mysql 連接，一個用於從數據庫中檢索數據。 最后我的 map.hbs 我的搜索欄在哪里。

map.js

function fill(Value) {
  //Assigning value to "search" div in "map.hbs" file.
  $('#search').val(Value);
  //Hiding "display" div in "map.hbs file.
  $('#display').hide();
}

$(document).ready(function() {
  //On pressing a key on "Search box" in "map.hbs" file. This function will be called.
  $("#search").keyup(function() {
      //Assigning search box value to javascript variable named as "name".
      var name = $('#search').val();
      //Validating, if "name" is empty.
      if (name == "") {
          //Assigning empty value to "display" div in "map.hbs" file.
          $("#display").html("");
      }
      //If the name is not empty.
      else {
          //AJAX is called.
          $.ajax({
              //AJAX type is "Post".
              method: "POST",
              //Data will be sent to "ajax.php".
              url: "/php/loadData.php",
              
              //Data, that will be sent to "ajax.php".
              data: {
                  //Assigning value of "name" into "search" variable.
                  search: name
              },
              //If result found, this function will be called.
              success: function(html) {
                  //Assigning result to "display" div in "map.hbs" file.
                  $("#display").html(html).show();
              }
          });
      }
  });
});

數據庫.php

<?php
$con = MySQLi_connect(
    "localhost", //Server host name.
    "root", //Database username.
    "", //Database password.
    "covid_database" //Database name or anything you would like to call it.
 );
 
//Check connection
if (MySQLi_connect_errno()) {
   echo "Failed to connect to MySQL: " . MySQLi_connect_error();
}
?>

loadData.php

<?php
 
//Including Database configuration file.
include "db.php";

//Getting value of "search" variable from "script.js".
if (isset($_POST['search'])) {
//Search box value assigning to $Name variable.
   $Name = $_POST['search'];
 
//Search query.
   $Query = "SELECT name FROM pois WHERE name LIKE '%$Name%' LIMIT 5";
 
//Query execution
   $ExecQuery = MySQLi_query($con, $Query);
 
//Creating unordered list to display the result.
   echo '
<ul>
   ';
   //Fetching result from the database.
//    while ($Result = MySQLi_fetch_array($ExecQuery)) {
//        ?>
//    <!-- Creating unordered list items.
 
//         Calling javascript function named as "fill" found in "map.js" file.
 
//         By passing fetched result as a parameter. -->
 
//    <li onclick='fill("<?php echo $Result['Name']; ?>")'>
//    <a>
//    <!-- Assigning searched result in "Search box" in "map.hbs" file. -->
 
//        <?php echo $Result['Name']; ?>
//    </li></a>
//    <!-- Below php code is just for closing parenthesis. Don't be confused. -->
//    <?php
// }}
// ?>
// </ul>

?>

map.hbs

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

{{!-- Search Bar --}}
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" id="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0"  type="submit" oninput="triggerSearch()">Search</button>
        <div id="display">
        </div>
    </form>
    
    <script src="/map.js"></script>

Answer 1

你的服務器，你寫的好像是Node.js，不識別你請求的URL。 這是因為您還沒有為它編寫端點處理程序。

您的選擇：

• 在運行 PHP 的 JS 中編寫一個端點處理程序（Node.js 不是這個的理想選擇，但我相信這是可能的）。
• 運行具有良好 PHP 支持的不同服務器（例如Nginx或 Apache HTTPD.
• 改寫JavaScript中的PHP程序

我自己會為后者提供 go，混合服務器端語言通常比它值得的更復雜。