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，混合服务器端语言通常比它值得的更复杂。