Differences between contentType and dataType in jQuery ajax function

JavascriptAjaxJquery

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAndreaNobiliView Question on Stackoverflow
Solution 1 - JavascriptAnthony GristView Answer on Stackoverflow
Solution 2 - JavascriptMaria Ines ParnisariView Answer on Stackoverflow