jQuery - Data Submission (Form vs Ajax Post)

Question

I'm interested in other Developer Opinions and thoughts regarding Posting Data with:

Native HTML: <form action="" method="POST">

vs

jQuery: jquery.post(), or $.ajax()

Currently, I use both for different reasons, and personally, I enjoy both in their own respective ways.

I have noticed a nuance with the jQuery route, on random occasions, which is why I'm fishing for opinions.

I'll try my best to explain what I'm doing. But basically (on specific form pages) I disable <form> submissions with jQuery, and post the form data without reloading the browser.

Sometimes like this:

simple_form.php

<form class="checkMyForm" id="myemailFORM">
  <input name="email1" type="text" value="[email protected]" />
  <input name="email2" type="text" value="[email protected]" />
  <input type="submit" name="button" value="submit" />
</form>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

   $("form.checkMyForm").on('submit', function(){
      // do some stuff here (validation, clean-ups, who knows what else....)
      // stop if problems are detected:
      return false;

      // if good to go, use ajax(), for this page:
      var formid = $(this).attr("id");  // #myemailFORM 
      var formvaluesSerialized = $(this).serialize(); // key=val&key=val

      $.ajax({ 
         url:"simple_form.php", // stay on current page (php code is listening)
         data:"formid="+formid+"&"+formvaluesSerialized,
         type:"POST",
         cache:false,
         error:function(x,t,m){ /* alerts, logs, maybe freak out here  */ },
         success:function(response){

             /* do stuff here, and never redirect 
                use the "response" for any reason I'd like
             */

         }

      }); //eof ajax()

      return false; // ensure the html form still does not submit
   }); //eof on()

}); 
</script>

The code above works great for me, and 99.99% of the time I have no issues.

And then, randomly, it appears the jQuery wasn't listening and I experience the <form> submission as normal.

What gets weird is that I will see the browser Address Bar appear like this:

http://myurl.com/simple_form.php?formid=myemailFORM&[email protected]&[email protected]

I simply just change the url: [http://myurl.com/simple_form.php], and resubmit, jQuery does no browser reloading, data is posted, and all is good. (so it's random and sparse)

Does this happen to anyone?
Or is it just safe to say browsers sometimes trip up on their own time with JavaScript?

thoughts?

Answer 1

Typically, the $_POST method is used whenever we need to pass the data submitted by the client to the server, after which we want to present an updated page to the client (or an entirely different page) when the server processes the data.

As for AJAX, it is typically used when we want the client to pass some data to the server while keeping the client on the same page and updating only a portion of that page when the server responds.

In your case, based on your URL:

http://myurl.com/simple_form.php?formid=myemailFORM&[email protected]&[email protected]

a $_GET request was submitted - which is typically used when we want the client to request some data from the server. You can tell $_GET requests apart from $_POST requests as the URL will have ?...&...&... structure to it when using $_GET.

Perhaps in cases where you see this $_GET request, you have the form method specified as GET:

<form class="checkMyForm" id="myemailFORM" method="GET">