What are the differences between application/json and application/x-www-form-urlencoded?

Question

The first case is telling the web server that you are posting JSON data as in:

{"Name": "John Smith", "Age": 23}

The second case is telling the web server that you will be encoding the parameters in the URL:

Name=John+Smith&Age=23

webRequest.ContentType = "application/x-www-form-urlencoded";

1. Where does application/x-www-form-urlencoded's name come from?

   If you send HTTP GET request, you can use query parameters as follows:

   http://example.com/path/to/page?name=ferret&color=purple

   The content of the fields is encoded as a query string. The application/x-www-form- urlencoded's name come from the previous url query parameter but the query parameters is in where the body of request instead of url.

   The whole form data is sent as a long query string.The query string contains name- value pairs separated by & character

   e.g. field1=value1&field2=value2

2. It can be simple request called simple - don't trigger a preflight check

   Simple request must have some properties. You can look here for more info. One of them is that there are only three values allowed for Content-Type header for simple requests

   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain

3.For mostly flat param trees, application/x-www-form-urlencoded is tried and tested.

request.ContentType = "application/json; charset=utf-8";

1. The data will be json format.

axios and superagent, two of the more popular npm HTTP libraries, work with JSON bodies by default.

{
  "id": 1,
  "name": "Foo",
  "price": 123,
  "tags": [
    "Bar",
    "Eek"
  ],
  "stock": {
    "warehouse": 300,
    "retail": 20
  }
}

2. "application/json" Content-Type is one of the Preflighted requests.

Now, if the request isn't simple request, the browser automatically sends a HTTP request before the original one by OPTIONS method to check whether it is safe to send the original request. If itis ok, Then send actual request. You can look here for more info.

3. application/json is beginner-friendly. URL encoded arrays can be a nightmare!