Submitting data from a form to server is very commmon in the web. If you wish to submit the form data via JQuery .load() method, there are TWO JQuery methods which you may find it handy. There are .serialize() and serializeArray().

Both .serialize() and .serializeArray() collects the values of all successful form controls and encode them, so it can be sent to server.

The difference is .serialize() create a query string and .serializeArray() creates array of name and value objects.

When we apply $("form").serialize() to the form below, it returns a query string as such.

name=Christian+Bale&email=christian.bale%40live.com&gender=male&dob=30+January+1974

On the other hand, if we apply $("form").serializeArray(), it creates an array of Javascript object containing name/value pairs based on the data collected.

[
  {
    name: "name",
    value: "Christian Bale"
  },
  {
    name: "email",
    value: "christian.bale@live.com"
  },
  {
    name: "gender",
    value: "male"
  }, 
  {
    name: "dob",
    value: "30 January 1974"
  }
]

That means, if we pass the result of .serialize(), to .load() method, it will send a HTTP GET to server while .serializeArray() will send HTTP POST to server.

Result:

When you click both .serialize() or .serializeArray() button, they both send a request to a simple PHP file.

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'POST') 
    {
        echo "<strong>HTTP POST</strong> <br/><br/>";
        foreach ($_POST as $key => $value)
        echo $key.'='.$value.'<br />';
    } 
    else if ($_SERVER['REQUEST_METHOD'] === 'GET')  
    {
        echo "<strong>HTTP GET</strong> <br/><br/>";
        echo $_SERVER['QUERY_STRING'];
    }
?>

Here is the JQuery code associated to the two buttons above.

$("#btn-serialize-array").click(function() 
{
    $("#result").load('http://www.ajax-tutor.com/demo/form-test.php',$("form").serializeArray());
});

$("#btn-serialize").click(function() 
{
    $("#result").load('http://www.ajax-tutor.com/demo/form-test.php',$("form").serialize());
});