我正在尝试使用数据库值自动填充文本框。但无法填充文本框字段。我正在使用node.js，express.js和postgresql数据库。我期待的是当我输入演员名字时，我希望字段用我的数据库中的值填充。我怎样才能实现它。成为node.js的新手并表达。这是我的代码。
server.js
var express = require('express');
var path = require('path');
var db = require('pg');
var app = express();
var bodyParser = require('body-parser');
var async = require('async');
//app.use(express.static(path.join(__dirname,'/')));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
var dbConnection = "postgres://postgres:am@localhost:5432/movie_info";
app.get('/movielist',function(req,res) {
var dbClient = new db.Client(dbConnection);
dbClient.connect(function(err){
if(err)
throw err;
var query = "select movie_title from movie";
var query1 = "select per_fname from person";
var query2 = "select genre_title from genre";
//USE ASYNC TO RENDER MULTIPLE QUERIES
async.series({
movie: function (movie_list){
dbClient.query(query,function(err,result){
movie_list(err,result.rows)
console.log("select movie query has been executed");
})
},
person: function (person_list){
dbClient.query(query1,function(err,result){
person_list(err,result.rows)
})
},
genre: function (genre_list){
dbClient.query(query2,function(err,result){
genre_list(err,result.rows)
})
}
},function(err,results){
if(!err){
res.render('index.ejs', results);
}
});
});
});
app.post('/submit',function(req,res) {
var dbClient = new db.Client(dbConnection);
var movie_title=req.body.movie_title;
var movie_year=req.body.movie_year;
var movie_time=req.body.movie_time;
var movie_lang=req.body.movie_lang;
var movie_release_date=req.body.movie_release_date;
var movie_release_country=req.body.movie_release_country;
var movie_genre = req.body.genre_title;
var person_fname =req.body.person_fname;
var person_lname =req.body.person_lname;
var person_gender=req.body.person_gender;
var person_role= req.body.person_role;
console.log('req.body');
console.log("check: "+req.body.person_fname);
console.log(req.body);
console.log("movie to be added: "+movie_title);
var insert_movie_query = "insert into movie (movie_title,movie_year,movie_time,movie_lang,movie_release_date,movie_release_country) values ('"+movie_title+"','"+movie_year+"',"+movie_time+" ,'"+movie_lang+"','"+movie_release_date+"','"+movie_release_country+"')";
var insert_movie_genre_query = "insert into movie_genre(movie_id,genre_id) select movie.movie_id,genre.genre_id from movie, genre where movie.movie_title='"+movie_title+"' and genre.genre_title='"+movie_genre+"'";
//USE ASYNC TO RENDER MULTIPLE QUERIES
var person_size = person_fname.length;
console.log("person length = "+person_size);
// Function
dbClient.connect(function(err)
{
if(err) throw err;
async.series(
{
function()
{
for(var i=0;i<person_size;i++)
{
var insert_person_query = "insert into person (per_fname,per_lname,per_gender) values('"+person_fname[i]+"','"+person_lname[i]+"','"+person_gender[i]+"')";
dbClient.query(insert_person_query,function(err,result){
console.log("if person 2 exists "+result.rows);
});
console.log("person "+i+" has been added");
}
//insert movie data
dbClient.query(insert_movie_query);
//insert movie_genre data
dbClient.query(insert_movie_genre_query);
},
},function(err,results){
if (err) throw err;
res.write("Movie data has been added");
res.end();
});
});
});
app.listen(8080,function(){
console.log('Server started');
});
index.ejs
<html >
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<section class="home">
<h1>Movie list</h1>
<select class="movie-dropdown" name="movie-list">
<% for(var i=0; i<movie.length; i++) {%>
<option class="list-group-item">
<span></span><%=movie[i].movie_title%>
</option>
<% } %>
</select>
<br>
<h1>Person list</h1>
<select class="person-dropdown" name="person-list">
<% for(var i=0; i<person.length; i++) {%>
<option class="list-group-item">
<span></span><%=person[i].per_fname%>
</option>
<% } %>
</select>
<h1>Add movie</h1>
<form action="/submit" method="POST" name="movie_form" id="movie_form">
<fieldset>
<label for="Movie name">Movie Name </label>
<input type="text" id="movie_title" name="movie_title" />
<br>
<label for="Movie name">Movie year </label>
<input type="text" id="movie_year" name="movie_year" />
<br>
<label for="Movie name">Movie time </label>
<input type="text" id="movie_time" name="movie_time" />
<br>
<label for="Movie name">Movie language </label>
<input type="text" id="movie_lang" name="movie_lang" />
<br>
<label for="Movie name">Movie release date </label>
<input type="text" id="movie_release_date" name="movie_release_date" />
<br>
<label for="Movie name">Movie release country </label>
<input type="text" id="movie_release_country" name="movie_release_country" />
<br>
<label for="Movie genre">Movie genre </label>
<select class="genre-dropdown" name="genre_title" id ="genre_title">
<% for(var i=0; i<genre.length; i++) {%>
<option class="list-group-item">
<span></span><%=genre[i].genre_title%>
</option>
<% } %>
</select>
<br>
<label id ="person_fname" for="person fname">person first name </label>
<input type="text" id="person_fname_text" name="person_fname" />
<label id ="person_lname" for="person lname">person last name </label>
<input type="text" id="person_lname_text" name="person_lname" />
<select name='person_gender' id='person_gender'>
<option value="M" id ="m" name="m">M</option>
<option value="F" id ="f" name="f">F</option>
</select>
<select name='person_role' id='person_role'>
<option value="ACTOR" id ="role_actor" name="role_actor">ACTOR</option>
<option value="DIRECTOR" id ="role_director" name="role_director">DIRECTOR</option>
<option value="PRODUCER" id ="role_producer" name="role_producer">PRODUCER</option>
</select>
<button type="button" onclick="add_person()">Add person</button>
<br>
<div id="person_container"></div>
<input type="submit" value="add_movie" />
</fieldset>
</form>
</section>
</body>
</html>
<script>
function add_person()
{
//var index = $("#person_container").length + 1;
var fname_label = $("#person_fname").clone();
var fname_textbox = $("#person_fname_text").clone();
var lname_label = $("#person_lname").clone();
var lname_textbox = $("#person_lname_text").clone();
var gender_dropdown = $("#person_gender").clone();
var role_dropdown = $("#person_role").clone();
gender_dropdown.attr("id","person_gender");
gender_dropdown.attr("name","person_gender");
role_dropdown.attr("id","person_role");
role_dropdown.attr("name","person_role");
$("#person_container").append(fname_label);
$("#person_container").append(fname_textbox);
$("#person_container").append(lname_label);
$("#person_container").append(lname_textbox);
$("#person_container").append(gender_dropdown);
$("#person_container").append(role_dropdown);
$("#person_container").append("<br>");
var abc = $("#person_container select").length;
console.log(abc);
}
</script>