简体   繁体   English

AJAX POST 错误 404(未找到)使用 javascript,mysql,php

[英]AJAX POST Error 404 (Not Found) Using javascript,mysql,php

I'm trying to create a live search bar where I type names and I'm getting results from my database.我正在尝试创建一个实时搜索栏,我可以在其中键入名称并从我的数据库中获取结果。

图片错误

This is my project structure:这是我的项目结构:

在此处输入图像描述

The files I'm using are map.js where I have my ajax call.我正在使用的文件是 map.js,其中我有 ajax 电话。 My two php files one for mysql connection and one to retrieve the data from the database.我的两个 php 文件,一个用于 mysql 连接,一个用于从数据库中检索数据。 And last my map.hbs where is my search bar.最后我的 map.hbs 我的搜索栏在哪里。

map.js 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();
              }
          });
      }
  });
});

db.php数据库.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 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 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>

Your server, which you seem to have written in Node.js, does not recognise the URL you are requesting.你的服务器,你写的好像是Node.js,不识别你请求的URL。 This would be because you haven't written an endpoint handler for it.这是因为您还没有为它编写端点处理程序。

Your options:您的选择:

  • Write an endpoint handler in JS that runs the PHP (Node.js is not the ideal for this, but I believe it is possible ).在运行 PHP 的 JS 中编写一个端点处理程序(Node.js 不是这个的理想选择,但我相信这是可能的)。
  • Run a different server which has decent PHP support (such as Nginx or Apache HTTPD.运行具有良好 PHP 支持的不同服务器(例如Nginx或 Apache HTTPD.
  • Rewrite the PHP program in JavaScript改写JavaScript中的PHP程序

I'd go for the latter myself, mixing server-side languages is usually more complication than it is worth.我自己会为后者提供 go,混合服务器端语言通常比它值得的更复杂。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM