Differences between contentType and dataType in jQuery ajax function

Question

I have the following Jquery callback function and I have a litle doubt about it (I don't know very well Jquery):

$("form.readXmlForm").submit(function() {
    // Riferimento all'elemento form che ha scatenato il submit 
    var form = $(this);
    // Variabile che contiene il riferimento al bottone clickato 
    var button = form.children(":first");

    $.ajax({        // Viene eseguita la chiamata AJAX 
        type: "POST", // Tipo di richiesta: POST 
        // URL verso quale viene inviata la richiesta
        url: form.attr("action"),    
        // Dati XML inviati: 
        data: "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><javaBean><foo>bar</foo><fruit>apple</fruit></javaBean>", 
        // Tipo di media type accettabile dalla response: 
        contentType: "application/xml", 
        dataType: "text", 

        success: function(text) { 
            MvcUtil.showSuccessResponse(text, button); 
        }, 

        error: function(xhr) { 
            MvcUtil.showErrorResponse(xhr.responseText, button); 
        }
    });

As you can see this function simply execute an AJAX Request to the backend setting the parameter for this request.

I have set that I am sending the request towards an URL, that the request is a POST request and that the data that I am sending are the following string:

"barapple"

I have some difficulties to understand what is the differences between contentType and dataType

I think that contentType specify the type of data that are acceptable recived in the HTTP Response, is it right?

And dataType? What say? The type of data that I am sending in the HTTP Request?

In this case is is "text" because I am sending a textual string that rappresent XML code?

Is the content-type and data-type purpose differs between jQuery usage and REST API usage? — sofs1, Jan 13 '19 at 05:04

score 191 · Accepted Answer · edited Jun 20 '20 at 09:12

From the documentation:

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: String

When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it'll always be sent to the server (even if no data is sent). If no charset is specified, data will be transmitted to the server using the server's default charset; you must decode this appropriately on the server side.

and:

dataType (default: Intelligent Guess (xml, json, script, or html))

Type: String

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

They're essentially the opposite of what you thought they were.

Also `contentType` affects the headers, `dataType` doesn't – Vinay Mar 31 '17 at 07:24 — Vinay, Mar 31 '17 at 07:24

score 98 · Answer 2 · answered Aug 15 '15 at 21:42

In English:

ContentType: When sending data to the server, use this content type. Default is application/x-www-form-urlencoded; charset=UTF-8, which is fine for most cases.
Accepts: The content type sent in the request header that tells the server what kind of response it will accept in return. Depends on DataType.
DataType: The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response. Can be text, xml, html, script, json, jsonp.

Differences between contentType and dataType in jQuery ajax function

2 Answers2

Linked

Related