Я работаю на одностраничном веб-сайте, используя Netbeans (HTML5 с Node.js и Express JS). Ниже приведен пример того, что мне нужно сделать (не настоящий веб-сайт).
У меня есть форма, когда я нажимаю кнопку отправить, мне нужно отправить данные в БД и обновить текущую страницу, которая имеет форму. Сейчас он отправляет данные в БД и отображает пустую страницу (выглядит как пустая страница в формате JSON. Мне нужно обновить, потому что я создаю API REST для отображения данных из той же БД на той же странице (index.pug).
В моем случае я использую Jage / Pug вместо файлов HTML
//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
Вот app.js
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;
а вот маршруты / index.js
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;
Я пытался сделать это в jQuery:
$('#button').click(function() {
location.reload(true);
});
Это работает, но только когда я нажимаю на кнопку ДОБАВИТЬ, не имея никаких значений в полях ввода.
Можно ли перезагрузить страницу после POST-запроса? Здесь я что-то не так делаю?
Заранее спасибо!