I'm new in AJAX and have been learning the functions of jQuery get() and post() methods recently. While the get() method worked smoothly, I've faltered while coming across the post() method, that throws an error saying: "405 (Method not allowed)" every time I try to invoke it.
Using Bootstrap, I have a simple HTML file named get_post.html that has a div, paragraph and button elements each. Using jQuery, on the click event of the button, I'm sending a name and location using post() method to a php file named mypost.php that will process the data and send a string of message back to get_post.html. I want to show the final message in the paragraph element of get_post.html. While trying to achieve this, every time I click on the button, the browser console shows the error message mentioned above. Assuming the problem is somehow related to CORS policy, I must mention that both the get_post.html and the mypost.php files reside in the same folder under the same domain. So how come it's a CORS policy-related error? Moreover, I'm using Node.js http-server localhost to run the get_post.html file. Hence, any issue related to localhost is unlikely too. Besides, I enabled and disabled CORS while running http-server, but of no avail. I also tried using IIS, but the same problem arises there as well.
So, what might be causing the error and how can I get rid of it? As I'm new in AJAX, I'm not much used to the intricacies of it. Most of the online solutions are not related to my scenario; therefore, I couldn't obtain much help from them. Please assist in sorting this out, if possible with a basic-level example.
get_post.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<p id="loadedData">This is where data will be loaded from server dynamically.</p>
<button class="btnLoad btn btn-primary">Load Data</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btnLoad").click(function() {
// Fetching data using post() method.
$.post("mypost.php", {
name: "Firstname Lastname",
location: "Countryname"
}, function(data, status) {
$("#loadedData").html(data);
alert(status);
});
});
});
</script>
</body>
</html>
mypost.php code:
<?php
$name = $_POST["name"];
$location = $_POST["location"];
echo "This is ".$name.". I'm from ".$location".";
?>
Thanks & Regards!
