如何在html表单的输入文本字段中显示响应数据？

Question

I am really new to node.js and do have a problem. 我真的是node.js的新手，确实有问题。 I want to show the data from the logged in user in these inputfields. 我想在这些输入字段中显示登录用户的数据。

I can access to the data of the logged in user by following code and can show it also on the console: 我可以通过以下代码访问登录用户的数据，也可以在控制台上显示该数据：

Output on console 在控制台上输出

Here is the code on the server-side: 这是服务器端的代码：

app.post('/aender', function (req, res) {

    res.send(req.session.username);
    res.send(req.session.name);
    res.send(req.session.email);

    var sql = "UPDATE user SET name ='" + [req.body.name] + "', username='" + [req.body.username] + "', email='" + [req.body.email] + "', password='" + [req.body.password] + "' WHERE user_ID='" + [req.session.user_id] + "'";

    if(req.body.password === req.body.password2) {
        db.query(sql, (err, result) => {
            if (err) throw err;
            console.log("Daten erfolgreich geaendert");
            res.redirect('/aender');
        });
    }else{
        res.redirect('/aender');
    }
});

Here is the HTML-Code: 这是HTML代码：

<!doctype html>
<html>
<h2 class="page-header">Registrierung</h2>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../app.js"></script>

<form id ="form1" action="/aender" method="post">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name" name="name" id ="name">
    </div>
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" placeholder="username" name="username" id ="username">
        <script>
            displayUserData()
        </script>
    </div>
    <div class="form-group">
        <label>Email</label>
        <input type="email" class="form-control" placeholder="Email" name="email" id ="email" pattern="(^[a-zA-Z0-9_-]{1,20}@[a-zA-Z0-9]{1,20}.[a-zA-Z]{2,3}$)">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Password" name="password" pattern="(?=.*[a-zA-Zd!@#$%^&*()-_+={}[]|;:<>,./?]).{6,}">
    </div>
    <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" class="form-control" placeholder="Password" name="password2" pattern="(?=.*[a-zA-Zd!@#$%^&*()-_+={}[]|;:<>,./?]).{6,}">
    </div>
    <button type="submit" name="submit" class="btn btn-default">Profil ändern</button>
</form>
<form id ="form2" action="/loeschen" method="post">
    <button type="submit" name="submit" class="btn btn-default">Konto löschen</button>
</form>
</html>

For example I do want to display the name, username and the e-mail of Max Mustermann, like that: 例如，我确实想要显示Max Mustermann的名称，用户名和电子邮件，如下所示：

Data on Form 表格上的数据

Answer 1

What you want to do is called interpolation and it is not directly possible in HTML. 您要执行的操作称为插值，并且在HTML中无法直接实现。 There are two possible options: 有两种可能的选择：

Create an API REST service omn the server side and do your call with ajax or jquery and then retrieve data (not the best option if you are not planning to have it for other purposes and not the best option in terms of security). 在服务器端创建一个API REST服务，并使用ajax或jquery进行调用，然后检索数据（如果您不打算将其用于其他目的，则不是最佳选择，就安全性而言，不是最佳选择）。
You can consider to switch to pug , which can be totally integrated with nodejs . 你可以考虑切换到哈巴狗，它可与完全集成的NodeJS 。 Here is a practical example of interpolation with jade, which is the predecessor of pug. 这是帕格的前身翡翠内插的一个实际示例。

if you want to do this with ajax you've first to change server logic: 如果要使用ajax进行此操作，则首先要更改服务器逻辑：

app.post('/aender', function (req, res) {

    var sql = "UPDATE user SET name ='" + [req.body.name] + "', username='" + [req.body.username] + "', email='" + [req.body.email] + "', password='" + [req.body.password] + "' WHERE user_ID='" + [req.session.user_id] + "'";

    if(req.body.password === req.body.password2) {
        db.query(sql, (err, result) => {
            if (err) throw err;
            console.log("Daten erfolgreich geaendert");
            res.json({username:req.session.username,name:req.session.name,email:req.session.email});
        });
    }else{
        res.redirect('/aender');
    }
});

(Please note that i have just corrected the function in order to do that, but your logic is still broken, there's no sense at all to pass the session parameters). （请注意，我刚刚更正了此功能，但是您的逻辑仍然坏了，完全没有意义传递会话参数）。

Then in your html: 然后在您的html中：

<script type="text/javascript">

$.post(/*hostname+*/ "/aender", function( data ) {
  console.log(data); // {username:req.session.username,name:req.session.name,email:req.session.email}
})
</script>

This is not a full complete script, but it is a good start for you to adapt. 这不是一个完整的脚本，但是它是您适应的一个很好的开始。

如何在html表单的输入文本字段中显示响应数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-08-24 23:34:20

如何在html表单的输入文本字段中显示响应数据？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-08-24 23:34:20

解决方案1
0 已采纳 2019-08-24 23:34:20