251

What is the difference between

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

and

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

Prithvi Raj Nandiwal
  • 3,122
  • 3
  • 22
  • 34
  • Related post -[application/x-www-form-urlencoded or multipart/form-data?](https://stackoverflow.com/q/4007969/465053) – RBT Nov 27 '21 at 09:45

3 Answers3

276

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
ivanleoncz
  • 9,070
  • 7
  • 57
  • 49
Icarus
  • 63,293
  • 14
  • 100
  • 115
  • 29
    What implications does it have on the server side. I see sites like stackoverflow & Twitter use `x-www-form-urlencoded` for AJAX requests like vote etc. The response sent back is `JSON`. I would think that it's better to have a symmetrical request/response pair i.e. both JSON. – user Jul 20 '14 at 09:25
  • 2
    @AdamJohns : This blog is worth reading although it doesn't exactly answer the "why" : http://homakov.blogspot.in/2012/06/x-www-form-urlencoded-vs-json-pros-and.html – user Oct 14 '14 at 15:14
  • 29
    @buffer My understanding is using JSON as contentType helps when the data to be sent is more complex and involves a lot of hierarchy.. whereas form encoded is good to send simple params in url which can be read at the backend without to much code... I guess this answers the why part of it. – Ankit Srivastava Dec 13 '15 at 06:53
  • @Medorator A late comment. Though for example, when you're sending a complex JSON object with an array of objects in it, using `application/x-www-form-urlencoded` would confuse the server (Elixir using Poison in my case) and result in some inappropriate parsing of the object (it somehow converted the nested array of objects to a map, instead of a list). Using `application/json` should be the correct choice in this case. – xji Apr 02 '18 at 10:39
37

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
  }
}
  1. "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.

  1. application/json is beginner-friendly. URL encoded arrays can be a nightmare!
fgul
  • 5,763
  • 2
  • 46
  • 32
7

One of the biggest differences between the two is that JSON-encoding the post usually preserves the data types of the values that are sent in (as long as they are valid JSON datatypes), whereas application/x-www-form-urlencoded will usually have all properties converted to strings.

For example, in the JSON-encoded post of:

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

the server will most likely parse the Age property as the integer 23.

Whereas in

Name=John+Smith&Age=23

the server will most likely parse Age as the string "23".

Of course, if you are using other layers to parse these values and convert them to the appropriate types, this may not be an issue.

arashb31
  • 473
  • 6
  • 12