login - React 路由器:登录帖子
问题描述
我是 React & Router 的初学者,我正在尝试设置一个非常简单的登录表单和重定向。
我真的不明白我必须把我的“逻辑代码”(一个ajax调用和一个重定向)放在哪里。
这是我尝试登录时得到的..
GET security/login?callback=jQuery33102958950754760552_1525660032193&format=json&_=1525660032194 40 5()
它应该是“ POST ”而不是“ GET ”
这是我写的。
import React from "react";
import { Link } from "react-router-dom";
import $ from "jquery";
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userid: "",
password: "",
submitted: false
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(e) {
e.preventDefault();
var root = 'security/login';
//var userid = $("#userid").val();
// var password = $("#password").val();
var formData = {
"userId" : $('input[name=userid]').val(),//$('input[name=userid]').val()
"password" : $('input[name=password]').val()//$('input[name=password]').val()
};
var jsondata = JSON.stringify(formData);
console.log(jsondata);
alert("test" +jsondata);
$.ajax({
url: root,
method: 'POST',
data: {
format: 'json'
},
contentType : "application/json; charset=utf-8",
error: function() {
$('#info').html('<p>An error has occurred</p>');
},
headers: {
'Content-Type': 'application/json', /*or whatever type is relevant */
'Accept': 'application/json' /* ditto */
},
dataType: 'jsonp',
encode : true,
success: function(data, response) {
alert(+data.status.message);
var $title = $('<h1>').text(data.talks[0].talk_title);
var $description = $('<p>').text(data.talks[0].talk_description);
$('#info')
.append($title)
.append($description);
}
});
//done(Login.function(data)
// {
// this.setState({});
// console.log(this.state.data);
// }
}
render() {
// const { loggingIn } = this.props;
// const { userid, password, submitted } = this.state;
return (
<div className="container">
<div className="col-md-5 col-md-offset-13 login-form text-center">
<div className="form-top">
<div className="form-top-left">
<h3>LOGIN PAGE</h3>
<p>Please enter your userID and password</p>
</div>
</div>
<form onSubmit={this.handleSubmit}>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-user" />
</span>
<input
className="form-control"
placeholder="UserID"
name="userid"
id="userid"
type="text"
required
/>
</div>
<div className="input-group col-lg-10 col-md-offset-1">
<span className="input-group-addon">
<i className="glyphicon glyphicon-lock" />
</span>
<input
type="password"
name="password"
id="password"
className="form-control"
placeholder="Password"
required
/>
</div>
<button type="submit"
className="btn btn-danger btn-block col-xs-6 col-lg-11"
id="login">
>
LOGIN
</button>
</form>
<div className="form-footer">
<div className="row">
<div className="col-xs-7 blink">
<i className="fa fa-unlock-alt" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
希望你们都可以帮助我...提前谢谢
解决方案
推荐阅读
- mysql - 如何在 MySQL 中将时区偏移值(例如“-0400”)转换为带有冒号(例如“-04:00”)的时区偏移值?
- c# - Automapper 不绑定通用列表
- sqoop - Sqoop:异常错误工具.ImportTool:导入失败:java.net.UnknownHostException:主机:主机:导入时出现未知错误
- java - 是否可以在 Siddhi Cep 控制时间
- python - 如何从aiohttp中的url获取查询字符串参数?
- angular - 如何在 Angular 4 中实现 woocommerce api 以列出所有产品
- arrays - 如何在不知道完整字符串名称的情况下在数组中查找特定字符串
- r - 水平分解无法转换为 ggplot barplot 变量顺序
- powershell - PowerShell Get-Winevent 按关键字和提供程序名称问题
- android - 检测领域数据库中的变化并更新远程数据库android