26

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

LB.
  • 13,730
  • 24
  • 67
  • 102
  • this is too vague, and you could get started via google query – Josh Stodola Mar 28 '09 at 06:00
  • 1
    possible duplicate of [JavaScript post request like a form submit](http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit) – mikemaccana May 07 '14 at 14:50
  • http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype – Joshua Kifer Mar 28 '09 at 05:02
  • [In my answer](http://stackoverflow.com/questions/692196/post-request-javascript/25423688#25423688) you **can do a request invisible to the user without AJAX, popups or refresh the page**. Of course, you don't retrieve a response but it's usefull for **RESTFul** API without AJAX. – SnakeDrak Aug 21 '14 at 10:41

3 Answers3

33

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);
Pankaj
  • 3,592
  • 2
  • 26
  • 22
4

I have made a function that send a request without refresh the page, without open a page and without AJAX. The proccess is invisible to the user. I use a false iframe to send a request:

/**
* Make a request without ajax and without refresh 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 a 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/.

SnakeDrak
  • 3,406
  • 4
  • 28
  • 41
  • EDIT: seems somebody figured out how to make a working version which doesn't raise a potential XSS attack flag. http://jsfiddle.net/b87pzbye/37/ – Domino Apr 23 '15 at 17:58
4

You can do this using AJAX calls (XMLHttpRequest object)

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

sundeep
  • 1,792
  • 1
  • 15
  • 21
  • 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 :). – SnakeDrak Aug 21 '14 at 10:21