Übergeben von Daten in POST-Anforderung

Question

Ich möchte Daten in der POST-Anforderung buchen. Ich habe ein Login-Formular, das ich in handleLoginButtonClick mache eine POST-Anfrage wie dieser ich

handleLoginButtonClick() { 
     let token; 
     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url": "https://trigger-backend.appspot.com/auth/login/", 
      "method": "POST", 
      "credentials": 'include', 
      "headers": { 
       "content-type": "application/x-www-form-urlencoded", 
      }, 
      "data": { 
       "password": JSON.stringify(document.getElementById("password").value), 
       "username": JSON.stringify(document.getElementById("username").value) 
      }, 
      success: function(data, textStatus, jQxhr){ 
       // alert("success"); 
      }, 
     } 

     $.ajax(settings).done((response) => { 

      token = JSON.stringify(response.auth_token) 
      this.context.router.push('/app') 
     }); 

So

render(){ 
     return (
      <div className="LoginPage"> 
       <div className="login-page"> 
        <div className="form"> 
         <form className="login-form"> 
          <input id="username" type="username" placeholder="username"/> 
          <input id="password" type="password" placeholder="password"/> 
          <p className="message">Not registered? <a href="#">Request Username and Password</a></p> 
         </form> 
         <button onClick={this.handleLoginButtonClick.bind(this)}>login</button> 
        </div> 
       </div> 
      </div> 
     ); 
    } 

sieht bin derzeit einschließlich der Daten wie diese

"data": { 
       "password": JSON.stringify(document.getElementById("password").value), 
       "username": JSON.stringify(document.getElementById("username").value) 
      } 

Aber api gibt mir ein 400 Fehler wie folgt

Aber zur gleichen Zeit, wenn ich die Daten wie diese passieren dann funktioniert es

"data": { 
       "password": "apurv", 
       "username": "Apurv" 
      }, 

, was das Problem hier ist. Beide sollten gleich sein, oder?

Answer 1

sollten Sie entfernen die JSON.stringify Anrufe hier, da sie unnötige doppelte Anführungszeichen um die Werte addiert machen sie ungültig:

"data": { 
    "password": document.getElementById("password").value, 
    "username": document.getElementById("username").value 
} 

Anstatt also das Senden der Wert apurv als Passwort, das Sie "apurv" senden, die nicht die richtige ist Passwort.

Answer 2

Der Rückgabewert von "getElementById(). Value" ist String, , aber "JSON.stringify()" dient zum Konvertieren von Objekt in Zeichenfolge. das bedeutet, Sie versuchen, Zeichenfolge in Zeichenfolge zu konvertieren. deshalb ist der Fehler aufgetreten.