$ .ajax api의 응답을받을 수 없습니다. 게시물 요청

Question

버튼 클릭만으로 로그인 페이지에서 나머지 API를 호출하려고합니다. 나는 그것을하기 위해 $ .ajax를 사용하고있다. POST 요청이 전송되고 200 코드가 백엔드에도 표시됩니다. 하지만 내 브라우저 네트워크 탭에 실패한 것으로 나타납니다. 나는 무엇이 잘못되었는지 모른다. 응답이 api에서 오는 경우 콘솔에서 응답을 인쇄하려고하지만 아무것도 인쇄되지 않습니다. 그것은 api가 POST req를 얻고 있다는 것을 의미합니다. 그것은 나를위한 토큰을 생성하고 그것을 내게 보내지 만 나의 클라이언트 측은 응답을 얻지 못하고 있습니다. 여기 내 코드와 필수 스크린 샷이 있습니다. 추신 콘솔에서 오류가 발생하지 않습니다.

import React, {Component} from 'react' 
import {Router, Route, browserHistory, IndexRoute} from "react-router" 
require("./login.css") 
import valueLink from 'valuelink' 
import $ from 'jquery' 

    export default class LogInComponent extends Component { 
     handleLoginButtonClick() { 
      var settings = { 
       "async": true, 
       "crossDomain": true, 
       "url": "https://******appspot.com/auth/login/", 
       "method": "POST", 
       "credentials": 'include', 
       "headers": { 
        "content-type": "application/x-www-form-urlencoded", 
       }, 
       "data": { 
        "password": "****", 
        "username": "****" 
       } 
      } 

      $.ajax(settings).done(function() { 
       alert("success"); 
      }); 
     } 



     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"/> 
           <button onClick={this.handleLoginButtonClick}>login</button> 
           <p className="message">Not registered? <a href="#">Request Username and Password</a></p> 
          </form> 
         </div> 
        </div> 

       </div> 
      ); 
     } 
    } 

이 내가 클릭 할 때 이것은 내 네트워크 탭

입니다 : 3000 ... 기자 칼럼에서. 강조 표시된 선은 나를 필요로하는 곳입니다. 버튼 요소에 대한 기본 유형이 submit 때문에 클릭하면

Answer 1

귀하의 버튼 양식을 제출합니다. 이는 사용자가 직접 클릭 핸들러를 제공 할 때도 발생합니다. 양식 제출은 기본적으로 양식에 action 속성이 없기 때문에 기본적으로 페이지를 다시로드하므로, ajax 요청 중에 다시로드됩니다 (네트워크 탭에서 볼 수 있듯이). 이 문제를 해결할 수있는 몇 가지 방법이 있습니다.

버튼 요소에 type="button"을 추가 할 수 있습니다

:

는

handleLoginButtonClick(event) { 
    event.preventDefault(); 
    ... 
} 

당신은 폼 요소 상에 onSubmit 핸들러를 사용할 수 있습니다 : 기본 기본 이벤트가 온 클릭 처리기에서 처리 취소 할 수 있습니다

<button type="button" onClick={this.handleLoginButtonClick}>login</button> 

버튼의 onClick 처리기 대신에 다음과 같이 입력합니다.

<form className="login-form" onSubmit={this.handleLoginFormSubmit}> 
    ... 
</form> 

with

handleLoginFormSubmit(event){ 
    event.preventDefault(); // Stop form from submitting 
    ... 
}