How to add data parameter in ajaxSend properly?

Question

In some circumstance I need to add POST parameter programmatically to AJAX request.

I'm trying something like this:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    ajaxOptions.data = "additional_key=additional_value&" + ajaxOptions.data;
    ajaxOptions.context.data = "additional_key=additional_value&" + ajaxOptions.context.data;
    console.log(ajaxOptions, 'ajaxOptions');
});

But additional_key isn't appear in $_POST array.

Answer 1

$(document).ready(function() {
    $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
        if (ajaxOptions.extraData) {
            ajaxOptions.extraData.additional_key = 'additional_value';
        }
    });
});

This only work for me (jQuery 1.4.4)

Answer 2

You can use ajaxPrefilter for this :

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    if (originalOptions.type !== 'POST' || options.type !== 'POST') {
        return;
    }

    options.data = $.extend(originalOptions.data, { yourdata : yourvalue });
});

See http://api.jquery.com/jquery.ajaxprefilter/ for more infos.

Answer 3

testing your above code gave me an error that ajaxOptions.context was undefined.

First, I'd advise that you check for existence first: (Assuming that context is ever going to be defined)

if(ajaxOptions.context) {
    ajaxOptions.context.data = "additional_key=additional_value&" + ajaxOptions.context.data;
} else {
    ajaxOptions.data = "additional_key=additional_value&" + ajaxOptions.data;
}

Sending off a mock AJAX request showed me that the data is being passed through when inspected in Firebug.

I tested the code by removing the context line, and it seemed to work:

Code:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    if(ajaxOptions.context) {
        ajaxOptions.context.data = "additional_key=additional_value&" + ajaxOptions.context.data;
    } else {
        ajaxOptions.data = "additional_key=additional_value&" + ajaxOptions.data;
    }
});

$.ajax({
    'url': 'test.php',
    'data': {'foo':'bar'},
    'type': 'POST'
});

Inspection:

Key             Value
additional_key  additional_value
foo             bar

Edit: Tested with JQuery 1.7.1 I've noticed that you're running a lower version of jQuery.