<html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> function DoPost(){ $.post("index.html", { name: "John", time: "2pm" } ); } </script> </head> <body> <a href="javascript:DoPost()">GO</a> </body> </html>
I made function and trying to call that function, inside that function I mentioned url and data as mentioned here. But, It's not working for me.
NOTE : Even I mentioned in my post title, then also I want to clarify that, I want to navigate to another page using POST
method through simple hyperlink.
This can be because of load balancing, or for simple randomization. The simplest way of redirecting a request to another page is by using sendRedirect () method of response object. Following is the signature of this method − This method sends back the response to the browser along with the status code and new page location.
Create an html form with all the data you need to send and specify as action the page you need to forward the user. Then put some hidden fields in that form. Wrap this inside of your doRedirect function and the redirect will work while correctly submitting your POST data.
The conventional solution for navigating with a POST request is a form, which the accepted answer uses. I will build on top of this by presenting a solution to programmatically create forms using DOM.
There are many reasons why you might want to redirect to a new page or URL. You changed your domain or URL structure You wan to redirect based on language, location or viewport The user has submitted a form and you want to direct them to the next page in the sequence The page may require authorization Redirect from HTTP to HTTPS
Create an html form with all the data you need to send and specify as action the page you need to forward the user.
<form method="post" id="theForm" action="REDIRECT_PAGE.php">
Then put some hidden fields in that form.
<input type="hidden" name="name" value="John"> <input type="hidden" name="time" value="2pm"> </form>
Wrap this inside of your doRedirect function and the redirect will work while correctly submitting your POST data.
document.getElementById('theForm').submit()
As a side note, you may want to redirect the user to a .php page not a .html one if you need to read POST data. This depends on your server configuration but, by default, I don't think you can run PHP code inside of a .html file.
I know this question is almost 4 years old and there is already an accepted answer, but I would like to provide an alternative solution as well as point out your mistake.
The conventional solution for navigating with a POST
request is a form, which the accepted answer uses. I will build on top of this by presenting a solution to programmatically create forms using DOM.
var payload = { name: 'John', time: '2pm' }; var form = document.createElement('form'); form.style.visibility = 'hidden'; // no user interaction is necessary form.method = 'POST'; // forms by default use GET query strings form.action = 'index.html'; for (key in Object.keys(payload)) { var input = document.createElement('input'); input.name = key; input.value = payload[key]; form.appendChild(input); // add key/value pair to form } document.body.appendChild(form); // forms cannot be submitted outside of body form.submit(); // send the payload and navigate
I used index.html
as per your original code, but I would take the accepted answer's advice and use PHP to accept and process the POST
data.
The main problem with your original solution is that it used $.post
, a helper function built on top of $.ajax
. AJAX is meant to be used when retrieving data from a server and using it within current page, rather than navigating to another page.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With