jQuery - Unzulässiger Aufruf

jQuery v1.7.2

Ich habe diese Funktion, die mir beim Ausführen den folgenden Fehler gibt:

Uncaught TypeError: Illegal invocation

Hier ist die Funktion:

$('form[name="twp-tool-distance-form"]').on('submit', function(e) {
    e.preventDefault();

    var from = $('form[name="twp-tool-distance-form"] input[name="from"]');
    var to = $('form[name="twp-tool-distance-form"] input[name="to"]');
    var unit = $('form[name="twp-tool-distance-form"] input[name="unit"]');
    var speed = game.unit.speed($(unit).val());

    if (!/^\d{3}\|\d{3}$/.test($(from).val()))
    {
        $(from).css('border-color', 'red');
        return false;
    }

    if (!/^\d{3}\|\d{3}$/.test($(to).val()))
    {
        $(to).css('border-color', 'red');
        return false;
    }

    var data = {
        from : from,
        to : to,
        speed : speed
    };

    $.ajax({
        url : base_url+'index.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        cache : false
    }).done(function(response) {
        alert(response);
    });

    return false;
});

Wenn ich entferne data von Ajax Call , funktioniert es .. irgendwelche Vorschläge?

Vielen Dank!

Ich denke, Sie müssen Zeichenfolgen als Datenwerte haben. Es ist wahrscheinlich etwas intern in jQuery, das die To & From-Objekte nicht korrekt codiert / serialisiert.

Versuchen:

var data = {
    from : from.val(),
    to : to.val(),
    speed : speed
};

Beachten Sie auch in den Zeilen:

$(from).css(...
$(to).css(

Sie benötigen den jQuery-Wrapper nicht, da To & From bereits jQuery-Objekte sind.

Versuchen Sie, processData: false in solchen Ajax-Einstellungen festzulegen

$.ajax({
    url : base_url+'index.php',
    type: 'POST',
    dataType: 'json',
    data: data,
    cache : false,
    processData: false
}).done(function(response) {
    alert(response);
});

Nur für den Datensatz kann es auch passieren, wenn Sie versuchen, nicht deklarierte Variablen in Daten wie zu verwenden

var layout = {};
$.ajax({
  ...
  data: {
    layout: laoyut // notice misspelled variable name
  },
  ...
});

Wenn Sie ein Formular mit der Javascript FormData- API zum Hochladen von Dateien senden möchten, müssen Sie die folgenden zwei Optionen festlegen:

processData: false,
contentType: false

Sie können Folgendes versuchen:

//Ajax Form Submission
$(document).on("click", ".afs", function (e) {
    e.preventDefault();
    e.stopPropagation();
    var thisBtn = $(this);
    var thisForm = thisBtn.closest("form");
    var formData = new FormData(thisForm[0]);
    //var formData = thisForm.serializeArray();

    $.ajax({
        type: "POST",
        url: "<?=base_url();?>assignment/createAssignment",
        data: formData,
        processData: false,
        contentType: false,
        success:function(data){
            if(data=='yes')
            {
                alert('Success! Record inserted successfully');
            }
            else if(data=='no')
            {
                alert('Error! Record not inserted successfully')
            }
            else
            {
                alert('Error! Try again');
            }
        }
    });
});

In meinem Fall habe ich mich gerade verändert

Hinweis: Dies ist im Fall von Django, also habe ich hinzugefügt csrftoken. In Ihrem Fall benötigen Sie es möglicherweise nicht.

Hinzugefügt contentType: false,processData: false

Auskommentiert "Content-Type": "application/json"

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    headers: {
        "X-CSRFToken": csrftoken,
        "Content-Type": "application/json"
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

zu

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    contentType: false,
    processData: false,
    headers: {
        "X-CSRFToken": csrftoken
        // "Content-Type": "application/json",
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

und es hat funktioniert.

In meinem Fall habe ich nicht alle Variablen definiert, die ich an Daten in Ajax übergebe.

var page = 1;

$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

Ich habe gerade die Variable var search_candidate = "candidate name";und ihre Funktionsweise definiert.

var page = 1;
var search_candidate = "candidate name"; // defined
$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

Mein Problem hatte nichts damit zu tun processData. Das lag daran, dass ich eine Funktion gesendet habe, die später nicht mehr aufgerufen werden kann, applyweil sie nicht genügend Argumente enthält. Insbesondere hätte ich nicht alertals errorRückruf verwenden sollen.

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    processData: false,
    error: alert
});

In dieser Antwort finden Sie weitere Informationen dazu, warum dies ein Problem sein kann: Warum werden bestimmte Funktionsaufrufe in JavaScript als "illegale Aufrufe" bezeichnet?

Die Art und Weise, wie ich dies entdecken konnte, war das Hinzufügen von a console.log(list[ firingIndex ]) zu jQuery, damit ich verfolgen konnte, was ausgelöst wurde.

Dies war die Lösung:

function myError(jqx, textStatus, errStr) {
    alert(errStr);
}

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    error: myError // Note that passing `alert` instead can cause a "jquery.js:3189 Uncaught TypeError: Illegal invocation" sometimes
});

In meinem Fall (mit Webpack 4) innerhalb einer anonymen Funktion, die ich als Rückruf verwendet habe.

Ich musste verwenden, window.$.ajax()anstatt $.ajax()trotz:

import $ from 'jquery';
window.$ = window.jQuery = $;

Auch dies ist eine Ursache: Wenn Sie eine jQuery-Sammlung (über .map () oder ähnliches) erstellt haben, sollten Sie diese Sammlung nicht in den Daten von .ajax () verwenden. Da es sich immer noch um ein jQuery-Objekt handelt , nicht um ein einfaches JavaScript-Array . Sie sollten .get () im Array und verwenden, um ein einfaches js-Array abzurufen, und es für die Dateneinstellung in .ajax () verwenden.