AJAXが間違ったパスワードのログイン応答

Question

私は$.ajax jQueryのリクエストでfake apiにデータを投稿している単純なログインフォームを作成しました。

私は2つの質問持っている - 私が間違っ詳細は

にログインしているときに私はエラー応答を表示することができますどのように私のフォーム

に正しいログイン情報のペアを設定するにはどうすればよい

1. を

   $("#my_form").submit(function (event) { 
    
       event.preventDefault(); //prevent default action 
    
       var post_url = $(this).attr("action"); //get form action url 
    
       var request_method = $(this).attr("method"); //get form GET/POST method 
    
       var form_data = $(this).serialize(); //Encode form elements for submission 
    
   
    
       $.ajax({ 
    
        url: post_url, 
    
        type: request_method, 
    
        data: { 
    
         username: "jordan", 
    
         password: ["miguel"] 
    
        }, 
    
       }) 
    
       .done(function (response) { 
    
        $("#server-results").html(response); 
    
       }); 
    
   });

   section class="form"> 
    
        <h2>Login To Your Account</h2> 
    
        <p class="valid">Valid. Please wait a moment.</p> 
    
        <p class="error">Error. Please enter correct Username &amp; password.</p> 
    
        <form action="https://reqres.in/api/users" class="loginbox" method="post" id="my_login"> 
    
         <input placeholder="Username" type="text" id="username"></input> 
    
         <input placeholder="Password" type="password" id="password"></input> 
    
         <button id="submit" value="Submit Form">Login</button> 
    
        <div id="server-results"></div> 
    
        </form> 
    
       </section>

Answer 1

あなたがすべきR emoveあなたはドキュメント

{ 
    "email": "email@doamin.com", 
    "password": "password" 
} 

に応じて、次の形式に従う必要がありますが、これらの資格情報のあなたはそれが意志成功登録上の最初の

$.ajax({ 
    url: "https://reqres.in/api/register", 
    type: "POST", 
    data: { 
     email: "email@domain.com", 
     password: "password" 
    }, 
    success: function(response){ 
     console.log(response); 
    } 
}); 

偽のユーザーを作成する必要がありますログイン成功のためとして、角括弧は、

あなたにログインするために、その後 201 Response

{ 
    "token": "QpwL5tke4Pnpja7X" 
} 

であなたは以下のようにトークンができ返しますエラーがなかった場合は

$.ajax({ 
     url: "https://reqres.in/api/login", 
     type: "POST", 
     data: { 
      email: "email@domain.com", 
      password: "password" 
     }, 
     success: function(response){ 
      console.log(response); 
     } 
    }); 

APIを使用すると、response.tokenのためにあなたの成功の機能でチェックすることができ、次のJSON

{ 
    "token": "QpwL5tke4Pnpja7X" 
} 

で200 responseを返します。

とAPIは、以下のJSON

{ 
    "error": "Missing password" 
} 

で400 responseを返すログイン試行中にエラーがあったかどうかを検出するので、それはあなたがエラーはそれが役に立てば幸い表示するためにerror:function(response){}

を使用できることを意味します。

Answer 2

$.ajax({ 
     url: post_url, 
     type: request_method, 
     data: { 
      email: "jordan@example.com", // replace username with email 
      password: "miguel" // remove the [] 
     }, 
    }) 
    .done(function (response) { // status code 200 
     if(response.error) // handle wrong email or password (login errors) 
      console.log(response.error); 
     else 
      $("#server-results").html(response); 
    }) 
    .fail(function(err){ // to handle request errors (404, 400, 500 ...) 
     console.log(err); 
    }); 

、あなたが偽のAPIにログインをしようとしている場合、あなたのform