Javascript 如何在POST请求后刷新表单页？
我正在使用Netbeans（HTML5和Node.js以及expressjs）开发一个单页网站。以下是我需要做的示例（不是真正的网站） 我有一个表单，当我单击submit时，我需要它将数据发布到DB并刷新包含该表单的当前页面。现在它将数据发布到DB并显示空白页面（看起来像是空的JSON格式页面。我需要刷新的原因是我正在创建RESTAPI，以便在同一页面上显示来自同一DB的数据（index.pug） 在我的例子中，我使用Jage/Pug而不是HTML文件Javascript 如何在POST请求后刷新表单页？,javascript,jquery,html,node.js,express,Javascript,Jquery,Html,Node.js,Express,我正在使用Netbeans（HTML5和Node.js以及expressjs）开发一个单页网站。以下是我需要做的示例（不是真正的网站） 我有一个表单，当我单击submit时，我需要它将数据发布到DB并刷新包含该表单的当前页面。现在它将数据发布到DB并显示空白页面（看起来像是空的JSON格式页面。我需要刷新的原因是我正在创建RESTAPI，以便在同一页面上显示来自同一DB的数据（index.pug） 在我的例子中，我使用Jage/Pug而不是HTML文件 //index.pug form(meth
//index.pug
form(method='post', class="form-signin")
input(type='text',class="form-control", name='fname')
input(type='text',class="form-control", name='lname')
button#button(type='submit', value='Submit') ADD
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const bodyParser = require("body-parser");
const pg = require('pg');
const config = {
user: 'postgres',
database: 'postgres',
password: 'password',
port: 5432,
idleTimeoutMillis: 30000// (30 seconds) how long a client is allowed to remain idle before connection being closed
};
const pool = new pg.Pool(config);
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(function(req, res, next){ //This is so I can use the pool in routes js files
req.pool = pool;
next();
});
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
var express = require('express');
var router = express.Router();
const bodyParser = require("body-parser");
router.use(bodyParser.urlencoded({extended: true}));
router.use(bodyParser.json());
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
//post to database
router.post("/",function (req, res, next) {
// Grab data from http request
var pool = req.pool;
const data = {fname: req.body.fname, lname: req.body.lname};
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
res.status(400).send(err);
}
client.query('INSERT INTO public.names(fname, lname) values($1, $2)', [data.fname.toUpperCase(), data.lname.toUpperCase()],
function (err, result) {
done();
if (err) {
console.log(err);
res.status(400).send(err);
}
res.status(200).send(result.rows);
//res.redirect(req.get('referer'));
});
});
});
//Create an API display all
router.get("/api/all", function (req, res, next) {
var pool = req.pool;
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
res.status(400).send(err);
}
client.query('SELECT * FROM public.names', function (err, result) {
done();
if (err) {
console.log(err.stack);
res.status(400).send(err);
}
res.status(200).send(result.rows);
});
});
});
module.exports = router;
$('#button').click(function() {
location.reload(true);
});
提前谢谢！您是否尝试在表单中添加操作参数
form(method='post', class="form-signin", action="/#")
由于您的按钮是
submitJavascript表单提交res.send（）中显示结果，请使用响应数据呈现另一个ejs
router/index.js
：
//post to database
router.post("/",function (req, res, next) {
// Grab data from http request
var pool = req.pool;
const data = {fname: req.body.fname, lname: req.body.lname};
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
// This is how to display data with html
res.render('error', {err});
}
client.query('INSERT INTO public.names(fname, lname) values($1, $2)', [data.fname.toUpperCase(), data.lname.toUpperCase()],
function (err, result) {
done();
if (err) {
console.log(err);
// This is how to display data with html
res.render('error', {err});
}
// This is how to display data with html
res.render('desplayData', result.rows);
});
});
});
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
<p><%=err%></p>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Display Data</title>
</head>
<body>
<p><%=rows%></p>
</body>
</html>
//post to database
router.post("/addDetail",function (req, res, next) {
// Grab data from http request
var pool = req.pool;
const data = {fname: req.body.fname, lname: req.body.lname};
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
res.status(400).send(err);
}
client.query('INSERT INTO public.names(fname, lname) values($1, $2)', [data.fname.toUpperCase(), data.lname.toUpperCase()],
function (err, result) {
done();
if (err) {
console.log(err);
res.status(400).send(err);
}
res.status(200).send(result.rows);
//res.redirect(req.get('referer'));
});
});
});
错误。ejs
：
//post to database
router.post("/",function (req, res, next) {
// Grab data from http request
var pool = req.pool;
const data = {fname: req.body.fname, lname: req.body.lname};
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
// This is how to display data with html
res.render('error', {err});
}
client.query('INSERT INTO public.names(fname, lname) values($1, $2)', [data.fname.toUpperCase(), data.lname.toUpperCase()],
function (err, result) {
done();
if (err) {
console.log(err);
// This is how to display data with html
res.render('error', {err});
}
// This is how to display data with html
res.render('desplayData', result.rows);
});
});
});
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
<p><%=err%></p>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Display Data</title>
</head>
<body>
<p><%=rows%></p>
</body>
</html>
//post to database
router.post("/addDetail",function (req, res, next) {
// Grab data from http request
var pool = req.pool;
const data = {fname: req.body.fname, lname: req.body.lname};
pool.connect(function (err, client, done) {
if (err) {
console.log("Can not connect to the DB" + err);
res.status(400).send(err);
}
client.query('INSERT INTO public.names(fname, lname) values($1, $2)', [data.fname.toUpperCase(), data.lname.toUpperCase()],
function (err, result) {
done();
if (err) {
console.log(err);
res.status(400).send(err);
}
res.status(200).send(result.rows);
//res.redirect(req.get('referer'));
});
});
});
使用javaScript更好地实现单页应用程序
我不懂pug/jade
所以我会使用html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<input id="fName" type="text">
<input id="lName" type="text">
<p onclick="addInfo()">Submit</p>
<!-- No need for `form` as will use JavaScript for Single Page Application -->
<!-- This p tag will display response -->
<p id="response"></p>
<!-- This p tag will display error -->
<p id="error"></p>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
function addInfo() {
// JavaScript uses `id` to fetch value
let fName = $("#fName").val(),
lName = $("#lName").val();
$.ajax({
"url": "/addDetail",
"method": "POST",
"data": {fName, lName}
})
.then( result => {
// On success empty all the input fields.
$("#fName").val('');
$("#lName").val('');
// Message to notify success submition
alert("Successfully added user.");
let newHTML = `<span>` + result + `</span>`;
$("#response").html(newHTML);
return;
})
.catch( err => {
// Notify in case some error occured
alert("An error occured.");
let newHTML = `<span>` + result + `</span>`;
$("#error").html(newHTML);
return;
});
}
</script>
</body>
</html>
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<input id="fName" type="text">
<input id="lName" type="text">
<p onclick="addInfo()">Submit</p>
<!-- No need for `form` as will use JavaScript for Single Page Application -->
<!-- This p tag will display response -->
<p id="response"></p>
<!-- This p tag will display error -->
<p id="error"></p>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script>
function addInfo() {
// JavaScript uses `id` to fetch value
let fName = $("#fName").val(),
lName = $("#lName").val();
$.ajax({
"url": "/addDetail",
"method": "POST",
"data": {fName, lName}
})
.then( result => {
// On success empty all the input fields.
$("#fName").val('');
$("#lName").val('');
// Message to notify success submition
alert("Successfully added user.");
let newHTML = `<span>` + result + `</span>`;
$("#response").html(newHTML);
return;
})
.catch( err => {
// Notify in case some error occured
alert("An error occured.");
let newHTML = `<span>` + result + `</span>`;
$("#error").html(newHTML);
return;
});
}
</script>
</body>
</html>
使用json查看空页面的原因是您使用的是表单提交，这不是一种单页应用程序方法。为了坚持使用同一页面，只需更改html内容，请为UI使用任何JavaScript框架，如AngularJs、reactJs、backboneJs等
您还可以使用AJAX调用提交数据并停留在同一页面上，通过隐藏和显示不同的HTML
标记，以相同的HTML显示来自API的响应
我在不同的帖子中也给出了类似的答案，看看这些：