AJAX 잘못된 비밀번호 로그인 응답

Question

$.ajax jQuery 요청을 통해 fake api에 데이터를 게시하는 간단한 로그인 양식을 만들었습니다.

나는이 개 질문이 - 나는 내 양식에 올바른 로그인 정보의 쌍을 설정할 수 있습니다 잘못된 세부 정보가 기록 될 때

가 어떻게 오류 응답을 보여줄 수있는 방법

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

을 수행해야 연구 이 문서

{ 
    "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); 
    }); 

및` "https://reqres.in/api/login"= 당신의 form