Click here to Skip to main content
15,559,491 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.

My codes for get_post.html and mypost.php files are given below.

Thanks & Regards!

What I have tried:

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/bootstrap@4.6.1/dist/css/bootstrap.min.css">

		<!-- jQuery library -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.js"></script>

		<!-- Popper JS -->
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

		<!-- Latest compiled JavaScript -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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".";
?>
Posted
Updated 30-Dec-21 5:15am
Comments
dindayaldhakar 30-Dec-21 3:29am    
Please remove the dot after $name variable from last line.

priyamtheone 30-Dec-21 10:03am    
@dindayaldhakar: No, that dot needs to be there, as I'm concatenating the variable $name with the rest of the string. Rather, I made a mistake in not inserting another dot after the $location variable in the same echo statement. However, the main problem was something else that I explained in my own answer posted below.

I found the solution. It was all about the PHP file not supporting the post() method.

Two things helped me zero in on the root of the problem. Firstly, Node.js http-server doesn't run PHP despite serving as a localhost. Secondly, 405 Method Not Allowed response status code indicates that the server knows the request method, but the target resource doesn't support this method. That intrigued me to install a dedicated PHP server. So, I hosted PHP on Windows with IIS as explained here and here. Thereafter, I hosted my project folder from within IIS and now, the post() method works perfectly and the two pages communicate as well as required.

However, there was a typo in my code. In the mypost.php file, there will be a
.
after the
$location
variable at the end of the
echo
statement, which I overlooked. That was throwing a 500 (Internal Server Error).

Hope this post helps those in the future facing the same problem.

Regards!
 
Share this answer
 
<?php
	$name = $_POST["name"];
	$location = $_POST["location"];

	echo "This is ".$name". I'm from ".$location".";
?>
 
Share this answer
 
Comments
Dave Kreskowiak 30-Dec-21 12:12pm    
Unexplained code snippets are not answers.

Worse yet, your solution doesn't address the source of the problem at all.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900