gpt4 book ai didi

javascript - POST请求后如何刷新表单页面?

转载 作者:太空宇宙 更新时间:2023-11-04 01:43:59 24 4
gpt4 key购买 nike

我正在使用 Netbeans(带有 Node.js 和 Express JS 的 HTML5)开发一个单页网站。以下是我需要做的示例(不是真实的网站)。

我有一个表单,当我单击提交时,我需要它将数据发布到数据库并刷新具有该表单的当前页面。现在,它将数据发布到数据库并显示空白页面(看起来像空的 JSON 格式页面。我需要刷新的原因是我正在创建 REST API 以在同一页面 (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;

这里是routes/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 请求后重新加载页面?我在这里做错了什么吗?

提前谢谢您!

最佳答案

您是否尝试过在表单中​​添加操作参数?

form(method='post', class="form-signin", action="/#")

关于javascript - POST请求后如何刷新表单页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52122677/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com