What are contentType and dataType and data in jQuery ajax Post?

Question

I just started to learn Json and bind data to a Gridview using Json, but I can not understand what is contentType and dataType and data?

I used the following code ............

<script type="text/javascript"> $(document).ready(function () { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "Gridview.aspx/BindDatatable", data: "{}", dataType: "json", success: function (data) { for (var i = 0; i < data.d.length; i++) { $("#gvDetails").append("<tr><td>" + data.d[i].OfficeName + "</td><td>" + data.d[i].City + "</td><td>" + data.d[i].Country + "</td></tr>"); } }, error: function (result) { alert("Error"); } }); }); </script> 

Answer 1

ContentType refers to the mime content type, which determines the type of content installed on the server. This can indicate FORM-encoded, XML, JSON, and many other types of content. This helps the server determine how to handle the content.

dataType helps jQuery regarding how to handle data. if you specify json, then the returned data will be evaluated as json, and the data passed to the success handler will be an object instead of a string

The data property is used for data transferred to the server. If you pass an object literal. JQuery will pass it either as part of the request body (if it is a message type), or as part of a query string (if get type)

Answer 2

if we specify the data type as Json, then the returned data will be evaluated as Json, and the data passed to the success handler will be an object instead of a string. Let's look at an example

  $.ajax({ type: "POST", url: "ProductWebService.asmx/GetProductDetails", data: "{'productId':'" + productId + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { var Product = response.d; $("#spnProductId").html(Product.Id);strong text $("#spnProductName").html(Product.Name); $("#spnPrice").html(Product.Price); $("#outputTable").show(); }, failure: function (msg) { alert(msg); } });