对于我使用var name=request.body.name
的文本框,
我将单选按钮命名为name="g"
,并将文本框命名为name="x"
,该文本框在单击单选按钮时显示。
我尝试使用以下语句获取“ x”的内容
var s=request.body.g.x
和var s=request.body.x
在这两种情况下,x的值在我的mongoDB Atlas数据库中均显示为null。
console.log(required.body)
它只出现
name="name_value" g="radio_button_value"
我应该如何获取x元素?
ejs文件:
<html>
<body >
<form>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- <link href="test2.css" rel="stylesheet" type="text/css" /> -->
<div id="mydiv"></div>
<div id="mydiv1"></div>
<script type="text/babel">
class App extends React.Component {
constructor(props){
super(props);
this.state={
gender:" ",
}
}
set(e)
{
this.setState({
gender:e.target.value
})
}
subComponent(){
if(this.state.gender=="MALE")
return (<div>Hello World</div>);
}
subComponent2(){
if(this.state.gender=="FEMALE")
return (<div class="b">
<form>
<h2>Hello World1</h2>
<input type="text" name="x"/>
</form>
</div>);
}
render() {
return (
<div >
<form action="/reg" method="post">
<h1>gender</h1>
<input type="text" name="name"/><br/>
<div class="container">
<div class="row">
<div class=" col-md-2 col-md-offset-4">
<input type="radio" value="MALE" name="g" onChange={this.set.bind(this)} />Male
</div>
<br/>
{this.subComponent()}
</div>
<div class="row">
<div class=" col-md-2 col-md-offset-4">
<input type="radio" value="FEMALE" name="g" onChange={this.set.bind(this)}/>Female
</div>
<br/>
{this.subComponent2()}
</div>
</div>
<input type="submit" value="SUBMIT"/><br/>
</form>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('mydiv'));
</script>
</body>
</html>
js代码:
var express=require("express");
var bodyParser=require("body-parser");
var ejs = require('ejs');
var ejsMate = require('ejs-mate');
const mongoose = require('mongoose');
mongoose.connect(''); //database name
var db=mongoose.connection;
db.on('error', console.log.bind(console, "connection error"));
db.once('open', function(callback){
console.log("connection succeeded");
});
var app=express();
app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({
extended: true
}));
app.engine('ejs',ejsMate);
app.set('view engine','ejs');
app.post('/reg', function(req,res){
var name=req.body.name;
var x=req.body.x;
var data={
"name":name,
"x":x,
}
console.log(req.body);
db.collection('sample').insertOne(data,function(err, collection){
if (err) throw err;
console.log("Record inserted Successfully");
});
return res.render('signup_success');
})
app.get('/',function(req, res){
res.render('test');
});
app.get('/',function(req,res){
res.set({
'Access-control-Allow-Origin': '*'
});
return res.redirect('index.html');
}).listen(3001)
console.log("server listening at port 3001");