26

How do you make a simple POST request in Javascript without using a forms and without posting back?

4

3 Answers 3

34

Though I am taking the code sample from @sundeep answer, but posting the code here for completeness

var url = "sample-url.php";
var params = "lorem=ipsum&name=alpha";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.send(params);
Sign up to request clarification or add additional context in comments.

1 Comment

So simple, I love it :D
4

You can do this using AJAX calls (XMLHttpRequest object)

http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

1 Comment

I think if he wanted to use AJAX he would have used. In my answer I have made a post request without AJAX and without open a page, popup or refresh the page :).
3

I have made a function that sends a request without refreshing the page, without opening a page, and without AJAX. The process is invisible to the user. I use a false iframe to send a request:

/**
* Make a request without Ajax and without refreshing the page
* Invisible for the user
* @param url string
* @param params object
* @param method string get or post
**/
function requestWithoutAjax( url, params, method ){
    
    params = params || {};
    method = method || "post";

    // function to remove the iframe
    var removeIframe = function( iframe ){
        iframe.parentElement.removeChild(iframe);
    };
    
    //Make an iframe...
    var iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    
    iframe.onload = function(){
        var iframeDoc = this.contentWindow.document;
        
        // Make a invisible form
        var form = iframeDoc.createElement('form');
        form.method = method;
        form.action = url;
        iframeDoc.body.appendChild(form);
        
        // pass the parameters
        for( var name in params ){
            var input = iframeDoc.createElement('input');
            input.type = 'hidden';
            input.name = name;
            input.value = params[name];
            form.appendChild(input);
        }
        
        form.submit();
        //Remove the iframe
        setTimeout( function(){ 
            removeIframe(iframe);
        }, 500);
    };
    
    document.body.appendChild(iframe);
}

Now you can do it:

requestWithoutAjax('url/to', { id: 2, price: 2.5, lastname: 'Gamez'});

See how works!: http://jsfiddle.net/b87pzbye/10/.

3 Comments

EDIT: seems somebody figured out how to make a working version which doesn't raise a potential XSS attack flag. jsfiddle.net/b87pzbye/37
"without open[ing] a page" You're opening a page in an iframe.
@Geremia I appreciate the clarification and understand your perspective. The iframe does indeed load a page, but it's done in a way that's invisible and non-disruptive to the user, aligning with the function's intent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.