JQuery Ajax Contenttype | Learn The Working Of Ajax Contenttype Option

Home » Add Content Type In Ajax Call » JQuery Ajax Contenttype | Learn The Working Of Ajax Contenttype Option

Maybe your like

Updated April 10, 2023

jQuery ajax contenttype

 

 

Introduction to jQuery ajax contenttype

The jQuery ajax contenttype is used to specifies that the type of data sending to the server. The jQuery ajax contenttype option is a built-in option that is passed to the ajax() function in the jQuery. The contenttype option is also called as MIME (multipurpose internet mail extension) type, it includes an HTTP header that specifies the information about what kind of data we are sending to the server. The ajax() function is used to perform an asynchronous HTTP request to the server and by using the contenttype option it describes to the server what data is sending and expecting to process it.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

Syntax –

$.ajax( { contenttype : value } );

Parameters –

contenttype- This is an optional option. It specifies the what type of data is sending to server while ajax() send the request to server. The default value is “application/x-www-form-urlencoded”. It is a Boolean or string data type. The possible string type values for the contenttype are “text/html”, “text/plain”, “application/jar”, “image/png”, “multipart/form-data”, “image/gif”, “audio/mp3”, “application/json” and all. The default Boolean type value is false. The false value tell jQuery that not to set any content type header.

Return value –

The ajax contenttype option does not return any value.

Working of ajax contenttype option

The jQuery ajax contenttype option is passed to the ajax() function with the value to specify what type of data is sending to the server. Suppose we have to do the asynchronous HTTP Post request and submit the data to the server. The type of data sending is JSON type which needs to be specified to the server. So we can use the ajax() function with contenttype option as “$.ajax( ‘/jquery/submitData’, { type : “POST”, contenttype : “application/json”, data : { myData: “Sample data.” } });”, where the first parameter is the URL where the data will submit. So, the data of specified content type submit to the server.

Examples for the jQuery ajax contenttype option

Here are the following examples mention below

Example #1

Example of jQuery ajax contenttype option to get the data by using ajax() function with contenttype “application/json” –

Code:

<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <title> This is an example for jQuery ajax contenttype option </title> </head> <body> <h3> This an example of jQuery ajax contenttype option : </h3> <button id = "Btn" > Send the ajax request with content type <button/> <p style = "color : red"> </p> <script type = "text/javascript"> $(document).ready( function () { $('#Btn').click( function(){ // url from where we want to get the data var ajxReq = $.ajax( '/jquery/getjsondata', { contentType : 'application/json', dataType : 'json', timeout : 600 }); ajxReq.success( function ( data, status, jqXhr ) { $( "p" ).append( "First data is: "+data.firstName + ". Second data is: " + data.middleName + ". Thirs data is: " + data.lastName); }); ajxReq.error( function ( jqXhr, textStatus, errorMessage ) { $( "p" ).append( "Error message is: " + errorMessage); }); }); }); </script> </body> </html>

An output of the above code is –

jQuery ajax contenttype output 1

Once we click on the button, the output is –

jQuery ajax contenttype output 2

In the above code, when we click on the button, the ajax() function will call which sends the HTTP request to the server to get the data. The first parameter mentioned the URL from where the data to get and also the contenttype option specified that what type of data is expecting as “contentType : ‘application/json’,”. Next, the received data is displaying as we can see in the above output.

Example #2

Example of jQuery ajax contenttype option to submit the data by using ajax() function with contenttype ” text/plain” –

Code:

<!doctype html> <html lang="en"> <head> <meta charset = "utf-8"> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <title> This is an example for jQuery ajax contenttype option </title> </head> <body> <h3> This an example of jQuery ajax contenttype option : </h3> <button id = "b1" > Send the ajax request with content type <button/> <p id = "p1" style = "color : red"></p> <script type="text/javascript" > $(document).ready(function () { $( "#b1" ).click( function(){ // url to which we want to submit the data. $.ajax( '/jquery/submitData', { type : "POST", contenttype : "text/plain", // submit this data data : { myData: "This is a sample data to submit." }, success : function ( data, status, xhr) { $( "#p1" ).text( "The sent data is : " + data + " and the status is " + status + "." ); }, error : function ( jqXhr, textStatus, errorMessage ) { $( "#p1" ).text( ' The error message is : ' + errorMessage ); } }); }); }); </script> </body> </html>

An output of the above code is –

output 3

Once we click on the “Get p children” button, the output is –

output 4

In the above code, when we click on the button, the ajax() function will call which sends the HTTP POST request to the server to submit the data. The first parameter mentioned the URL to where the data is to submit and also the contenttype option specified what type of data is sending as “contentType : “text/plain”,”. Next, the sent data is displaying along with its status as we can see in the above output.

Conclusion

The jQuery ajax contenttype option is a built-in option in jQuery, which is used to specifies that the type of data sending to the server.

Recommended Articles

This is a guide to jQuery ajax contenttype. Here we discuss the Working on the ajax contenttype option along with the examples and outputs. You may also look at the following article to learn more –

  1. jQuery window
  2. jQuery eq()
  3. jQuery contents
  4. jQuery global variable

Tag » Add Content Type In Ajax Call