無法接受來自$ .ajax api發布請求的響應

Question

我試圖單擊按鈕從我的登錄頁面調用rest api。 我正在使用$ .ajax這樣做。 POST請求被發送，並且200個代碼也顯示在后端。 但是在我的瀏覽器網絡選項卡中，它顯示失敗。 我不知道怎么了 當響應來自api時，我試圖在控制台中打印響應，但沒有打印任何內容。 這意味着api正在獲取POST請求，它正在為我生成令牌並將其發送給我，但是我的客戶端無法獲取響應。 這是我的代碼和基本屏幕截圖。 PS我在控制台沒有任何錯誤。

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 ...時。 突出顯示的行是我要去的地方。

Answer 1

單擊按鈕時，按鈕將提交表單，因為button元素的默認類型為submit 。 即使您給它自己的單擊處理程序，也會發生這種情況。 表單提交基本上只是重新加載頁面，因為表單缺少action -attribute，因此它會在ajax請求期間重新加載，這會取消它（如從“網絡”標簽中看到的）。 您有幾種方法可以解決此問題。

您可以將type="button"添加到button元素：

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

您可以在onClick處理程序中取消默認的本機事件處理：

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

您可以在form元素上使用onSubmit處理程序，而不是在按鈕上使用onClick處理程序：

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

與

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