[javascript] Differences between contentType and dataType in jQuery ajax function

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?

This question is related to javascript ajax jquery

The answer is


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.


enter image description here

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.

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to ajax

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?