Das Senden eines About an eine REST-API mithilfe von JQuery funktioniert nicht

Question

Ich habe eine REST-API ausgeführt, und ich poste einige Daten mit JQuery dorthin. Diese

ist, wie mein JQuery-Code sieht:

$(document).ready(function() { 

    $('#login-form').submit(function() { 

     var user = $('#uname').val(); 
     var pass = $('#pwd').val(); 

     alert('username = ' + user); 
     alert('password = ' + pass); 

     var JSONObject = { 'userName': user, 'password': pass }; 
     var jsonData = JSON.parse(JSONObject); 

     $.ajax({ 
      url: 'http://127.0.0.1:8080/user/login', 
      method: 'POST', 
      data: { userName: user, password: pass }, 
      dataType: 'JSON', 
      contentType: 'application/json', 
      success: function (data, status, jqXHR) { 
       //Do something 
       console.log('data = ' + data); 

      }, 
      error: function (jqXHR, status, errorThrown) { 
       alert('error ' + errorThrown); 

      } 
     }); 

    }); 

}); 

jedoch dieser Code nicht in der Lage ist, die API zuzugreifen. Ich erhalte die erwartete Nachricht nicht im Serverprotokoll. Wenn auf die Schaltfläche Senden des Formulars geklickt wird, wird der Browser neu geladen und es werden die Formulareingaben in der URL angezeigt. Das ist alles.

Meine API ist mit Java geschrieben und dies ist die relevante Methode.

@RequestMapping(value = "/user/login", method = RequestMethod.POST) 
    public ResponseEntity<User> logUser(@RequestBody User user){ 

     User loggedUser = loginService.authenticateUser(user); 

     if(loggedUser != null){ 
      System.out.println("User found"); 
      return new ResponseEntity<User>(loggedUser, HttpStatus.ACCEPTED); 
     }else{ 
      //user does not exsits 
      System.out.println("User not found"); 
      return new ResponseEntity<>(HttpStatus.NO_CONTENT); 
     } 

    } 

Ich kann wirklich nicht verstehen, was falsch ist. Es wird kein Fehler angezeigt. Kann mir jemand zeigen, warum das passiert und wie Sie dieses Problem beheben können?

Answer 1

Das Problem besteht darin, dass der Browser beim Submit-Ereignis neu geladen wird. Sie benötigen prevent() -Methode wie diese

$("#login-form").submit(function (event) { 
     event.preventDefault() 
     //further code here 

Dies verhindert, dass der Browser hinzufügen von Nachladen