Jquery AJAX post method throws 405 (method not allowed) error.

Question

0.00/5 (No votes)

See more:

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 29-Dec-21 5:21am

priyamtheone

Updated 30-Dec-21 4:15am

Add a Solution

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.

2 solutions

Solution 1

<?php
	$name = $_POST["name"];
	$location = $_POST["location"];

	echo "This is ".$name". I'm from ".$location".";
?>

Posted 29-Dec-21 21:30pm

dindayaldhakar

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.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

priyamtheone · Accepted Answer · 2021-12-30T04:15:00

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!