How to pass JSON data to server-side using jquery Ajax

Question

With the help of example and code, can you explain how to pass JSON data to server-side using jQuery Ajax?

Answer 1

You can use jQuery's $.ajax() method:

Prepare the Data: Create a JavaScript object containing the data you wish to send.

var dataToSend = {

    username: 'exampleUser',

    password: 'examplePass'

};

Convert to JSON: Use JSON.stringify() to convert the object into a JSON-formatted string.

var jsonString = JSON.stringify(dataToSend);

Configure the AJAX Request: Set up the $.ajax() method with the appropriate options:

$.ajax({

    type: 'POST',

    url: 'https://example.com/api/endpoint',

    contentType: 'application/json',

    data: jsonString,

    dataType: 'json',

    success: function(response) {

        console.log('Success:', response);

    },

    error: function(xhr, status, error) {

        console.error('Error:', error);

    }

});