Post a Form to a PHP File using XMLHTTPRequest/AJAX

Question

I am a bit forgetful of PHP, is there a simpler way to post a form using JavaScript AJAX, don't want to add jQuery simply to post an ajax request, without having to pass the parameters?

I want to post the form via Ajax and not have to get the parameters and send them in the call, is this possible? Is there an alternative to the following code...

var mypostrequest=new ajaxRequest()
mypostrequest.onreadystatechange=function(){
 if (mypostrequest.readyState==4){
  if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
   document.getElementById("result").innerHTML=mypostrequest.responseText
  }
  else{
   alert("An error has occured making the request")
  }
 }
}
var namevalue=encodeURIComponent(document.getElementById("name").value)
var agevalue=encodeURIComponent(document.getElementById("age").value)
var parameters="name="+namevalue+"&age="+agevalue
mypostrequest.open("POST", "basicform.php", true)
mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
**mypostrequest.send(parameters)**

It is my intent to use POST instead of GET to hide what is being sent on the URL, this feels strange and it's the same as using a GET. Or am I reading this wrong?

I know you said you don't want to add jQuery just for this, but it really would be worth adding jQuery, even just for this. In short, without adding jQuery there is no simple way to do this. — Styphon
– Styphon, Commented Sep 5, 2013 at 15:39
doxdesk.com/img/updates/20091116-so-large.gif from here: meta.stackexchange.com/questions/45176/… — Pinoniq
– Pinoniq, Commented Sep 5, 2013 at 15:49
@Pinoniq not really applicable here... You don't reinvent the wheel when someone has already done it for you. — Styphon
– Styphon, Commented Sep 5, 2013 at 15:52
@Styphon exactly. now tell me what reinventing the wheel is when using 'new XMLHttpRequest()' ? — Pinoniq
– Pinoniq, Commented Sep 5, 2013 at 16:00

Pinoniq · Accepted Answer · 2013-09-05 15:48:01Z

-3

Just don't use jQuery if you only want some plain simple Ajax.

This will do the job just fine:

// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  // code
}
httpRequest.open('GET', url)
httpRequest.send()

All kudos go to: https://gist.github.com/liamcurry/2597326

Now we could also add some more browser support (IE6 and older: http://caniuse.com/#search=XMLHttpRequest) @ all those jQuery heads: jQuery 2 dropped support for IE8 and older so no 'extra support' there.

// creates an XMLHttpRequest instance
function createXMLHttpRequestObject()
{
  // xmlHttp will store the reference to the XMLHttpRequest object
  var xmlHttp;
  // try to instantiate the native XMLHttpRequest object
  try
  {
    // create an XMLHttpRequest object
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    // assume IE6 or older
    try
    {
      xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
    }
    catch(e) { }
  }
  // return the created object or display an error message
  if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttp;
}

All kudos go to: http://www.cristiandarie.ro/asp-ajax/Async.html

This post was sponsored by Google (a really powerfull tool, you type in stuff and it gives more stuff with answers)

answered Sep 5, 2013 at 15:48

Pinoniq

1,3859 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Styphon Over a year ago

jQuery v2 may have dropped support by jQuery v1.10 still maintains it and is still developed along side v2.

Astronaut Over a year ago

I think you are missing the point. I am asking if there is a way to do an AJAX form post that does not require me to send(parameter) the parameters but instead works like a real submit button, where all my variables are in the global $_POST, I don't whant to jump to the other page I simply whant to update the same page, using GET this is very simple, and using POST it can be done in the way posted above, but I am looking for an alternative way to do this with POST.

Pinoniq Over a year ago

As m59 allready pointed out, you can't do this in vanlilla js. A lot of frameworks out there have some spcial functions to help you out with serializing data (again, see m59). But hey, why -1? because I understood the question wrong?

Elias Van Ootegem Over a year ago

@Pinoniq: Everything jQ does, JS does... so you can do it with VanillaJS The code in my question is a bit dodgey, but meanwhile I've perfected the form-formalizer code in my own toolkit (in total 250 lines of non-obfuscated code, ajax, event delegation, ready-callbacks and basic worker support... all in! [smug]Beat that jQ! [/smug])

Collectives™ on Stack Overflow

Post a Form to a PHP File using XMLHTTPRequest/AJAX

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related