我有路由后请求的问题,我需要建立注册表单和后输入从表单到mongob我做了路由器和后路由在服务器端,它的工作正常(当我使用邮递员)
//表格是模型所必需的
router.route('/').post(function(req,res,next){
res.send(req.body)
form.create(
{"first_name": req.body.first_name,
"last_name": req.body.last_name
})
.then(function(data){
res.send(data);
console.log(data);
}).catch(function(err){console.log(err)});
});
但是我需要从客户那里解雇它,而不是邮递员。在这里我迷失了。我可以这样做,但是当我添加提交操作时,它不起作用。我需要使用新功能来启动另一个东西,而无需重定向到另一个页面。如何传递this.refs.first_name.value身体,以便我可以使用提取功能??反应组分下方
添加了这个JavaScript/JSON片段
export default class Form extends React.Component {
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event){
event.preventDefault();
console.log(this.refs.first_name.value);
fetch('/', {
method: 'post',
body: {
"first_name": this.refs.first_name.value
}
});
};
render () {
return (
<div id="signup">
<form onSubmit={this.handleSubmit}>
<input ref="first_name" placeholder="First Name" type="text" name="first_name"/><br />
<input placeholder="Last Name" type="text" name="last_name"/><br />
<button type="Submit">Start</button>
</form>
</div>
)
}
}
我猜你使用ref
的方式已经过时了。试试下面看看你是否有运气。
export default class Form extends React.Component {
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event){
event.preventDefault();
fetch('/', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: {
"first_name": this.firstName.value
}
});
};
render () {
return (
<div id="signup">
<form onSubmit={this.handleSubmit}>
<input ref={(ref) => {this.firstName = ref}} placeholder="First Name" type="text" name="first_name"/><br />
<input ref={(ref) => {this.lastName = ref}} placeholder="Last Name" type="text" name="last_name"/><br />
<button type="Submit">Start</button>
</form>
</div>
)
}
}
我们需要将发送数据作为json字符串化
handleSubmit(event){
event.preventDefault();
fetch('/', {
method: 'post',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({
"first_name": this.state.firstName
})
});
};
这就是我在React中提出帖子请求的方式。js;
const res = fetch('http://15.11.55.3:8040/Device/Movies', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: {
id: 0,
},
})
.then((response) => response.json())
.then((responseJson) => {
return responseJson.movies;
})
.catch((error) => {
console.error(error);
});