Javascript 无法接受来自$.ajax api Post请求的响应

我试图通过单击按钮从登录页面调用RESTAPI。我正在使用$.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>
            );
        }
    }

import React，{Component}来自“React”
从“react Router”导入{Router，Route，browserHistory，IndexRoute}
要求（“./login.css”）
从“valueLink”导入valueLink
从“jquery”导入$
导出默认类LogInComponent扩展组件{
handleLoginButtonClick（）{
变量设置={
“异步”：true，
“跨域”：正确，
“url”：“https://******appspot.com/auth/login/”，
“方法”：“发布”，
“凭证”：“包括”，
“标题”：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
},
“数据”：{
“密码”：“**”，
“用户名”：“***”
}
}
$.ajax（设置）.done（函数（）{
警惕（“成功”）；
});
}
render（）{
返回(
登录
是否未注册
);
}
}

这是我的网络标签

这是当我点击：3000。。。来自启动器列。突出显示的那一行就是它带我去的地方

---

您的按钮在单击时提交表单，因为按钮元素的默认类型是

submit

。即使您为其提供自己的单击处理程序，也会发生这种情况。表单submit基本上只是重新加载页面，因为表单缺少

action

-属性，所以它会在ajax请求期间重新加载，这会取消它（从网络选项卡中可以看到）。你有几种方法可以解决这个问题

您可以向按钮元素添加

type=“button”

：

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

您可以在表单元素上使用onSubmit处理程序，而不是在按钮上使用onClick处理程序：

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

---

提交按钮提交，您不会取消单击操作。是的。因为我想在登录按钮点击时触发api。所以你在ajax调用中这样做，你需要取消点击操作…@epascarello谢谢你的帮助。

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

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