Resolving 'Uncaught TypeError: Illegal invocation' in jQuery AJAX Requests: Methods and Principle Analysis

Problem Background and Error Phenomenon

In web development, dynamically updating page elements is a common requirement. The scenario discussed in this article involves two select elements: Select A (nations) and Select B (cities). When users select different nations in Select A, the city options in Select B need to be updated accordingly. This one-to-many relationship requires dynamic data loading through AJAX requests.

The developer's initial implementation encountered a Uncaught TypeError: Illegal invocation error, which occurred in jQuery's minified file, making it difficult to directly identify the root cause. The error only appeared when the data parameter was an object, while it worked correctly when the data parameter was a string.

Error Code Analysis

The original erroneous code is shown below:

function my_onchange(e) {
    var sel_B = ...; // Get select element B
    
    var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
    };
    do_ajax(city_sel, data, 'ajax_handler.php');
}

The problem lies in the line id_A: e[e.selectedIndex]. This directly passes the HTML element itself rather than the element's value. When jQuery processes the data parameter, it serializes objects, and HTML elements cannot be properly serialized, resulting in the illegal invocation error.

Solution and Principles

The correct approach is to obtain the HTML element's value rather than the element itself:

function my_onchange(e) {
    var sel_B = ...; // Get select element B
    
    var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex].value
    };
    do_ajax(city_sel, data, 'ajax_handler.php');
}

By adding the .value property access, we obtain the actual value of the select option, which is a primitive data type that can be serialized, thus avoiding the illegal invocation error.

jQuery Data Processing Mechanism

jQuery's AJAX method processes data parameters by default:

• When the data parameter is a string, jQuery directly uses it as request data
• When the data parameter is an object, jQuery converts it to query string format
• During conversion, jQuery attempts to serialize each property value of the object

HTML element objects contain numerous properties and methods that cannot be serialized into simple string representations, which is the fundamental cause of the Illegal invocation error.

Complete Implementation Example

Below is the complete, correct implementation code:

function do_ajax(elem, mydata, filename) {
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        datatype: "html",
        success: function(data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

function my_onchange(e) {
    var sel_B = document.getElementById('city_select'); // Get city select element
    
    var selectedOption = e.options[e.selectedIndex];
    var data = {
        'mode': 'filter_city',
        'id_A': selectedOption.value // Critical fix: get value instead of element
    };
    
    do_ajax(sel_B, data, 'ajax_handler.php');
}

// Bind event listener
document.getElementById('nation_select').addEventListener('change', function() {
    my_onchange(this);
});

Related Configuration Options

In certain special cases, it may be necessary to adjust jQuery's default data processing behavior. As mentioned in Answer 3, the processData option:

$.ajax({
    url: 'ajax_handler.php',
    data: mydata,
    processData: false, // Disable data processing
    contentType: false,
    success: function(data) {
        // Handle response
    }
});

When processData is set to false, jQuery does not process the data, making it suitable for sending special data types like FormData.

Best Practice Recommendations

Based on the analysis in this article, the following best practices are recommended:

1. Always Pass Primitive Data Types: In AJAX requests, ensure you're passing primitive data types like strings and numbers, rather than complex JavaScript objects
2. Explicit Data Types: Be explicit about each variable's data type before use to avoid unexpected type conversion issues
3. Error Handling: Add error handling logic to AJAX requests for easier debugging and problem identification
4. Data Validation: Validate received data on the server side to ensure data integrity and security

Conclusion

The Uncaught TypeError: Illegal invocation error in jQuery AJAX requests is a common but easily solvable issue. The key lies in understanding jQuery's data processing mechanism and ensuring serializable data is passed. By obtaining HTML element values rather than the elements themselves, this type of error can be effectively avoided, enabling stable and reliable dynamic data loading functionality.