How to pass additional data to an AJAX request using the data option in jQuery?

To pass additional data to an AJAX request using the data option in jQuery, you can follow these steps:

Create a JavaScript object with key-value pairs of the additional data you want to send.
Use the "data" option in the jQuery AJAX request to pass this object.
Access the data on the server-side in your AJAX endpoint.

Here's an example code snippet to illustrate the process:

// Step 1: Create the additional data object
var additionalData = {
  key1: 'value1',
  key2: 'value2'
};

// Step 2: Pass the additional data using the "data" option in the AJAX request
$.ajax({
  url: 'your-ajax-endpoint-url',
  type: 'POST',
  data: additionalData,
  success: function(response) {
    // Handle the AJAX response
  },
  error: function(xhr, status, error) {
    // Handle any errors
  }
});

// Step 3: Access the data on the server-side (example in PHP)
$key1 = $_POST['key1'];
$key2 = $_POST['key2'];

In this example, "key1" and "key2" are the additional data keys, and "value1" and "value2" are their respective values. On the server-side, you can access the data using the appropriate language-specific syntax (in this case, PHP's $_POST variable).

Note: The example uses the POST method for passing the data, but you can modify it to use other HTTP methods (e.g., GET) based on your requirements.