Ajax error `Uncaught TypeError: Unzulässiger Aufruf beim Ajax-Aufruf

Question

Ich verwende das folgende Skript, um mein Login-Formular zu bearbeiten und eine Login-Anfrage von Ajax zu senden, aber ich bekomme den Fehler. Ich habe diesen Fehler noch nie zuvor erlebt. Der Code ist hier unten:

Uncaught TypeError: Illegal invocation 
    at e (jquery.min.js:4) 
    at Ab (jquery.min.js:4) 
    at Function.r.param (jquery.min.js:4) 
    at Function.ajax (jquery.min.js:4) 
    at loginReq (admin:95) 
    at HTMLButtonElement.onclick (admin:15 

2)

<script language="javascript" type="text/javascript"> 

function loginReq() { 
    var username = $("#username").val(); 
    var password = $("#password").val(); 
    // Checking for blank fields. 
    if(username =='' || password ==''){ 
    $('input[type="text"],input[type="password"]').css("border","2px solid red"); 
    $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red"); 
    $('#login_alert').show(); 
    $("#login_alert").fadeTo(2000, 500).slideUp(500, function(){ 
     $("#login_alert").slideUp(500); 
    }); 
    } else { 
     $.ajaxSetup({ 
      headers: { 
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      } 
     }); 
     var link="login"; 
     var formData = new FormData(document.getElementById('#login_form')); 
     $.ajax({ 
       type: 'post', 
       dataType: 'html', 
       url: link, 
       cache: false, 
       data: formData, 
       success: function (result) { 
       var obj = jQuery.parseJSON(result); 
       var status = obj['success']; 
       if(status == 'success'){ 
        window.location.href = "{{ url('dashboard') }}"; 
       }else{ 
        $("#login_alert2").show(); 
        $("#login_alert2").fadeTo(2000, 500).slideUp(500, function(){ 
         $("#login_alert2").slideUp(500); 
        }); 
       } 
       } 
     }); 
    } 
} 
</script> 

Könnte mir jemand helfen, was das Problem sein könnte!

Answer 1

Sie benötigen

processData to false: By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

function loginReq() { 
 
    var username = $("#username").val(); 
 
    var password = $("#password").val(); 
 
    // Checking for blank fields. 
 
    if(username =='' || password ==''){ 
 
     $('input[type="text"],input[type="password"]').css("border","2px solid red"); 
 
     $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red"); 
 
     $('#login_alert').show(); 
 
     $("#login_alert").fadeTo(2000, 500).slideUp(500, function(){ 
 
      $("#login_alert").slideUp(500); 
 
     }); 
 
    } else { 
 
     $.ajaxSetup({ 
 
      headers: { 
 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
 
      } 
 
     }); 
 
     var link="login"; 
 
     var formData = new FormData(document.getElementById('#login_form')); 
 
     $.ajax({ 
 
      type: 'post', 
 
      dataType: 'html', 
 
      url: link, 
 
      cache: false, 
 
      data: formData, 
 
      processData: false, 
 
      //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
 
      success: function (result) { 
 
       var obj = jQuery.parseJSON(result); 
 
       var status = obj['success']; 
 
       if(status == 'success'){ 
 
        window.location.href = "{{ url('dashboard') }}"; 
 
       }else{ 
 
        $("#login_alert2").show(); 
 
        $("#login_alert2").fadeTo(2000, 500).slideUp(500, function(){ 
 
         $("#login_alert2").slideUp(500); 
 
        }); 
 
       } 
 
      } 
 
     }); 
 
    } 
 
} 
 

 
$('#btn').on('click', function(e) { 
 
    loginReq(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form id="login_form"> 
 
    User name: <input type="text" id="username" value="username"> 
 
    Password: <input type="password" id="password" value="pasword"> 
 
    <button type="button" id="btn">Send Ajax</button> 
 
</form>

einstellen