Posting HTML Form to the Server [JavaScript/AJAX Code]

JavaScript/AJAX code for POST HTML Form Example

What is HTTP POST?

HTTP POST is one of the nine standard methods of the Hypertext Transfer Protocol. The POST method is used to post data to the server, upload files and images, and submit HTML forms. The HTTP POST method differs from HTTP GET and HEAD requests in that POST requests can change the server's state.

What is HTML Form?

A form is a section of an HTML document that contains controls such as text and password input fields, radio buttons, checkboxes, and a Submit button, enclosed in an HTML <form> tag. HTML forms collect user input and send it to a server for processing. Examples of HTML forms are login and image upload forms.

<form action="/register" method="post">
  <input type="text" id="name" name="name">
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Submitting HTML Forms over HTTP with JavaScript/AJAX

In HTTP, there are two ways to submit HTML forms to the server using the application/x-www-form-urlencoded and multipart/form-data content types. HTML forms can be submitted from browsers and from JavaScript/AJAX code.

1. Submitting HTML forms using the application/x-www-form-urlencoded media type.
   The application/x-www-form-urlencoded media type is mainly used for submitting short HTML forms as key-value pairs, for example, when authorizing a user using login/password forms.
   
   
   HTML Login Form Request Example

   POST /login HTTP/1.1
   Host: reqbin.com
   Content-Type: application/x-www-form-urlencoded
   Content-Length: 36
           
   login=my_login&password=my_password



2. Submitting HTML forms using the multipart/form-data media type.
   The multipart/form-data media type is used by browsers when uploading binary data to the server (for example, when uploading multiple images). In this case, the form data is formatted as a sequence of parts separated by MIME boundaries.
   
   
   HTML Upload Form Request Example

   POST /upload HTTP/1.1
   Host: reqbin.com
   Content-Type: multipart/form-data
   Content-Length: 526
             
   =======MIME boundary string
   Content-Disposition: form-data; login="login",
             
   my_login
   =======MIME boundary string
   Content-Disposition: form-data; name="file"; filename="image1.jpg"
   Content-Type: image/jpeg
             
   [image data]
   =======MIME boundary string
   Content-Disposition: form-data; name="file"; filename="image2.jpg"
   Content-Type: image/jpeg
             
   [image data]
   =======boundary string--

Submitting HTML Forms in JSON Format

HTML does not have native methods for converting forms to JSON objects. If you want to convert form data to JSON, you need to use JavaScript to:

1. Collect form data from a DOM object into a JavaScript object. If you are using jQuery, you can convert your HTML form into a JavaScript object with a single line using the $("#form").serializeArray() jQuery method.
2. Convert the JavaScript object to JSON string using JSON.stringify() method.
3. Send the form data to the server using the XMLHttpRequest or fetch methods.

Submitting HTML Forms using the HTTP GET Method

In some cases, you can submit form data using the HTTP GET method. The form data is passed to the server as a series of name/value URL parameters, and you are limited to the maximum length of the URL. For browsers, the limit is around 2000 characters (browser dependent) for the JavaScript/AJAX code, there is no such limit, but your server may have its limitations. For example, the maximum length of an Apache URL is 8177 characters. Submitting HTML forms using the HTTP GET method is less secure because you pass URL parameters data.

GET /login?login=my_login&password=my_passowrd HTTP/1.1
Host: reqbin.com

See also

• Top 9 HTTP Methods
• How do I post JSON to the server?
• How do I send an HTTP POST request?