我开始学习React和Node.js.我创建了一个非常简单的表单,并尝试以传统方式(同步,没有ajax)提交它用于学习目的。在src目录中,我有一个表单的目录,以及我提交表单的node.js文件的另一个目录(模型)。当我点击提交所有我得到的是“不能POST /model/controller.js”。我google了一下,什么都没发现。只是试图让基础知识失败。谢谢你的帮助。
'src / login / Login.js'中的表单
class Login extends React.Component {
render() {
return (
<form method="POST" action="/../model/controller.js" className="commonform" id="ajaxform" name="ajaxform">
<h2>Please Sign In</h2>
<Para class="usernotify" text= "test"/>
<Input name="email" />
<Input name="password" />
<Button name="Sign In" id="ajaxSubmit"/>
</form>
);
}
}
我提交给'src / model / controller.js'的服务器页面
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('Hello');
res.end();
}).listen(8080);
答案 0 :(得分:0)
假设您的'src/model/controller.js
正在运行一个http服务器并且正在/model/controller
收听有关POSTS请求的信息,请执行此类表格,例如来自文档https://reactjs.org/docs/forms.html
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
// Post your data here using something like axios
axios.post('http://localhost/model/controller', {
...your_data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//prevent form from being submitted automatically
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
....
</form>
);
}
}
答案 1 :(得分:0)
您好在控制器中的AppreciateCo已经添加了服务器但是缺少post方法,请添加类似的内容。
var express = require('express');
var app = express();
app.post('/api/users', function(req, res) {
var user_id = req.body.id;
var token = req.body.token;
res.send(user_id + ' ' + token);
});
您还需要更改html表单中的操作,它不应该是像controller.js这样的js文件,它应该是控制器端点,在我的情况下是/ api / users。
我的建议是将您的节点js作为端口8080上的单独模块运行,然后将您的操作更改为http://localhost:8080/api/users
的POST请求