Question

我试图通过点击按钮从我的登录页面调用rest api。我使用$ .ajax这样做。发送POST请求，后端也显示200个代码。但在我的浏览器网络选项卡中显示失败。我不知道出了什么问题。我试图在响应来自api时在控制台中打印响应，但没有打印出来。这意味着api正在获取POST请求，它正在为我生成令牌并将其发送给我，但我的客户端未能得到响应。这是我的代码和基本截图。附：我在控制台中没有任何错误。

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

单击时，您的按钮会提交表单，因为按钮元素的默认类型为submit。即使您给它自己的点击处理程序，也会发生这种情况。表单提交基本上只是重新加载您的页面，因为表单缺少action - 属性，因此它会在您的ajax请求期间重新加载，这会取消它（正如您从网络选项卡中看到的那样）。您有几种方法可以解决这个问题。

您可以将type="button"添加到按钮元素：

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

您可以在onClick处理程序中取消默认的本机事件处理：

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

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

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

与

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

无法接受$ .ajax api发布请求的响应

1 个答案: