POST(ing) data to the server using Javascript

02 Mar

Hi folks,

I am sharing my experience when using post and get methods and also given the code for handling posting data to the server using the JavaScript.

If the method is “get” –> The user agent takes the value of action and appends the values to the URL after the query string (?) and sent to the server. The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes. See the below URl for your reference.

Ex: http://<localhost&gt;:<portnumber>/actionclass?username=aaa&password=xyz

If the method is “post” –> The user agent will define the variable as a hidden in the from and sent all the required value to server once form submmitted and the content of form will go along with the body. The user agent conducts an HTTP post transaction using the value of the action attribute and a message created according to the content type specified by the enctype attribute.

Ex: http://<localhost&gt;:<portnumber>/actionclass

Benefits of performing POSTs via JavaScript?
1. Security reasons.
2. Perform redirects programmatically
3. Post data without annoying the user
4. Avoid the misuse of query string and beautify URLs

The ‘post’ function
Copy and paste the following code in the HEAD section of your HTML page

<script language=”javascript”>
function post(dictionary, url, method) {
method = method || “post”; // post (set to default) or get

// Create the form object
var form = document.createElement(“form”);
form.setAttribute(“method”, method);
form.setAttribute(“action”, url);

// For each key-value pair
for (key in dictionary) {
//alert(‘key: ‘ + key + ‘, value:’ + dictionary[key]); // debug
var hiddenField = document.createElement(“input”);
hiddenField.setAttribute(“type”, “hidden”); // ‘hidden’ is the less annoying html data control
hiddenField.setAttribute(“name”, key);
hiddenField.setAttribute(“value”, dictionary[key]);
form.appendChild(hiddenField); // append the newly created control to the form

document.body.appendChild(form); // inject the form object into the body section

How do I use it?
Copy the following code in the BODY section of your HTML page.
As you can see a dictionary object is declared as first, then two parameters are added. You can add as many parameters as you need.

<script language=”javascript”>
var myDictionary = [];
myDictionary[“1stKey”] = “1stValue”;
myDictionary[“2ndKey”] = “2ndValue”;

<input type=”button” value=”Click me to POST” onclick=”javascript:post(myDictionary, ‘destination.html’);” />
<input type=”button” value=”Click me to GET” onclick=”javascript:post(myDictionary, ‘destination.html’, ‘get’);”/>

The post function accepts a dictionary object, a destination URL, and optionally, the method (post or get, case in-sensitive).

Happy Coding!.

Get glued to know more updates.

Have a nice day:-)

Leave a comment

Posted by on March 2, 2013 in Uncategorized


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: