Rather than AJAX staying in the same HTML, sometimes, developers have to redirect to different URL using POST requests. We provide tricky JavaScript codes to redirect a POST request with no parameters limit. Comparison with GET request method are given in the example, too.
All codes here are not complicated, so you can easily understand even though you are still students in school. To benefit your learning, we will provide you download link to a zip file thus you can get all source codes for future usage.
Estimated reading time: 5 minutes
EXPLORE THIS ARTICLE
TABLE OF CONTENTS
BONUS
Source Code Download
We have released it under the MIT license, so feel free to use it in your own project or your school homework.
Download Guideline
- Prepare HTTP server such as XAMPP or WAMP in your windows environment.
- Download and unzip into a folder that http server can access.
SECTION 1
Redirect POST Request
Originally, HTTP designs its redirection using GET requests, while developers may have some concerns and would like to redirect to other URLs by POST requests. Let’s discuss about the topic.
HTTP GET & POST
Traditionally, using JavaScript, users redirect a GET request just by clicking, but would have to fill in a form to redirect a POST request. Indeed, GET requests are safe beyond seeing some parameters in browsers users might not want to see.
The reason why people would like to redirect a POST request in JavaScript could be that POST requests can make parameters unseen in browsers.
GET Request by A Href
<a href> usually redirect GET requests. Therefore, people think that GET requests are simple, and idempotent behaviors.
POST Request by Form
<form> needs more complex input and submit actions than <a href> to redirect a POST request in HTML. To reduce coding efforts, we will introduce a general way in JavaScript allowing to pass unlimited POST parameters in a request.
SECTION 2
The Example
The section demonstrates distinct methods to redirect URLs. Moreover, we create a JavaScript function available to redirect a POST request with unlimited POST data parameters.
Client-Site Script
We prepare both GET request and POST request in the example. As mentioned in the previous section, <a href> implements GET request, while <form> redirect POST request in JavaScript.
The codes <a href="server-get.php?key01=a01&key02=b02"> is a GET request. It is easy to increase more GET parameters in one transaction. For POST request, there should be some tips inserting more POST parameters into Form object.
<!DOCTYPE html>
<html>
<head>
<title>Redirect POST Request</title>
<meta charset="UTF-8">
<meta name="description" content="Scripts for Learning Programming">
<meta name="author" content="Easy Code Share">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<p><a href="server-get.php?key01=a01&key02=b02">Click to Redirect a GET Request</a></p>
<p><input type="submit" id="post" value="POST Request"></p>
</div>
</body>
</html>
<script>
$("#post").on("click", function() {
obj = {};
for(i=0; i<5; i++) {
obj["key" + i.toString()] = "value" + i.toString();
}
postRedirect("server-post.php", obj);
});
function postRedirect(redirectUrl, obj) {
var input_part='';
for (id in obj) {
input_part +=
'<input type="hidden" name="'+
id +
'" value="' +
obj[id] +
'"></input>';
}
var form_part =
'<form action="' +
redirectUrl +
'" method="post">' +
input_part +
'</form>';
console.log(form_part);
var form = $(form_part);
$('body').append(form);
$(form).submit();
}
</script>
For example, we define a JavaScript object containing 5 data elements. In a function, the content of object forms a series of HTML element <input> with name and value, i.e. key and value from the view of server sites. Eventually, function postRedirect() can play the role and redirect POST request in JavaScript with unlimited POST parameters.
Server-Site Script
Due to similarity, we ignore the server script for GET requests, and just focus on that for POST requests as below.
<!DOCTYPE html>
<html>
<head>
<title>Server POST</title>
<meta charset="UTF-8">
<meta name="description" content="Scripts for Learning Programming">
<meta name="author" content="Easy Code Share">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<?php
foreach($_POST as $key=>$value) {
echo "<p class='server-data'>$key => $value</p>";
}
?>
</div>
</body>
The redirected page lists POST data parameters received.
In addition, the example layout is decorated by the following CSS file.
body { font-size: 1em; font-family: Arial; }
.content { padding: 5% 10%; width: 100%; }
.server-data { background: pink; width: 50%; }
FINAL
Conclusion
Though it is a trick to redirect URLs, some people need such a function to improve coding efficiency. Without such an approach of HTML code generation in JavaScript, it is hard to redirect a POST request without POST data limit.
Thank you for reading, and we have suggested more helpful articles here. If you want to share anything, please feel free to comment below. Good luck and happy coding!
Learning Tips
Let us suggest a excellent way to learn HTML scripts here. Using Google Chrome F12 Inspect or Inspect Element will help you study the codes.
In Google Chrome, there are two ways to inspect a web page using the browser built-in Chrome DevTools:
- Right-click an element on the page or in a blank area, then select Inspect.
- Go to the Chrome menu, then select More Tools > Developer Tools.
Suggested Reading
- How to Store JSON Array in HTML Attribute and Get it
- Tips for Making Endless Page Scroll Against Pagination
TRY IT
Quick Experience
That is all for this project, and here is the link that let you experience the program. Please kindly leave your comments for our enhancement.
Try It Yourself
Click here to execute the source code, thus before studying the downloaded codes, you can check whether it is worthy.