[英]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:您的选择:
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.