POST请求后如何刷新表单页面？

Posted 2023-03-07

【中文标题】POST请求后如何刷新表单页面？

【英文标题】：How to refresh form page after POST request?

【发布时间】：2019-02-06 21:54:21

【问题描述】：

我正在使用 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 请求后重新加载页面？我在这里做错了什么吗？

提前感谢您！

【参考方案1】：

您是否尝试在表单中添加操作参数？

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

【参考方案2】：

由于您的按钮是 submit 类型，因此您不必使用 javascript 处理重新加载，因为它是默认的表单提交事件行为。

【参考方案3】：

编辑：除了form-submit，它会提供连接和空的浏览器DOM。除此之外，您正在使用res.send()，它只是将数据发送到浏览器，并且由于 DOM 中没有 JavaScript 来处理响应，并且响应显示时没有 HTML。

在 html render 和另一个 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);
       );
    );
);

error.ejs:

    <!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">    
        <title>Error</title>
    </head>
    <body>
        <p><%=err%></p>
    </body>
</html>

displayData.ejs:

    <!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">    
        <title>Display Data</title>
    </head>
    <body>
        <p><%=rows%></p>
    </body>
</html>

使用 javaScript 实现更好的单页应用程序 我不懂pug/jade 所以会用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>

router/index.js:

//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'));
            );
       );
 );

您看到带有 json 的空白页面的原因是您使用的是 form submit 这不是 单页应用程序 方法。为了坚持到同一页面并只更改 html 内容，请使用任何用于 UI 的 JavaScript 框架，例如 AngularJs、reactJs、backboneJs 等。

您还可以使用 AJAX 调用来提交数据并停留在同一页面上，并通过隐藏和显示不同的 HTML 标记以相同的 HTML 显示来自 API 的响应。

我在不同的帖子中也给出了类似的答案，请查看所有这些：

how to send data to html page and how to use ajax for single page application how-to-render-a-html-page-form-nodejs-api-when-requested-via-ajax how-to-fetch-fields-from-request-in-node-js-using-express-framework how-to-render-a-html-page-form-nodejs-api