将值传递给不同的网页表单答案

【问题标题】：passing value to a different webpage form将值传递给不同的网页表单
【发布时间】：2016-11-03 00:42:37
【问题描述】：

我正在尝试学习使用 JavaScript 和 nodejs 来制作 web 应用程序。我完全没有想法，不知道我是否正确地这样做了。所以我想要做的是，当用户点击动态创建的表格的一行时，它会打开一个新的 html 页面，其中包含一堆已经用 json 中的值填充的表单输入。现在我有它，当我点击表格行时，我可以选择 Id，作为测试，我想将它加载到输入字段中，但我将其设置为未定义

使用 fillform 函数创建表格的很大一部分

    for (i = 0; i < attendee.length; i++) {
        var tr = document.createElement('TR');
        if(i % 2 == 0)
        {
            tr.bgColor = '#E9F2F5';
        }
        for (var j = 0; j < attendee[i].length; j++) {
            var td = document.createElement('TD');

           /* if (j != 0) {
                td.setAttribute('contenteditable', 'true');
            }*/
            td.appendChild(document.createTextNode(attendee[i][j]));
            tr.appendChild(td);

            var currentRow = table.rows[i];
            var createClickHandler =
                function(tr)
                {
                    return function() {
                        var cell = tr.getElementsByTagName("td")[0];
                        var id = cell.innerHTML;
                        fillForm(id);
                    };
                };
            currentRow.onclick = createClickHandler(currentRow);
        }
        tableBody.appendChild(tr);
    }
    myTableDiv.innerHTML = "";
    myTableDiv.appendChild(table);
}

// this function is included in the html page as a onload function
function fillForm(id) 
{
    window.open("/populatedForm.html");
    document.getElementById("id").value = id;
    console.log(id);
}

我要填写的部分html输入。

<div class=container2>
    <form method="PUT" action="/process-form" enctype="multipart/form-data" autocomplete="off">
        <fieldset>
            <label>
                ID<br/>
                <input id="id" name="id" type="text" value=" " required/>
            </label>
            <br/>

这就是我的桌子的样子

这就是当我点击表格中的一行时输入的样子。它会打开新的 html 页面，但输入设置为未定义。我没有完成其余的工作，因为我无法让 id 工作。

任何建议都会很棒！谢谢！

【问题讨论】：

您有商店或任何东西可以在您的网页上保存状态吗？我认为您无法从代码中准确看出正在发生的事情是，当新网页出现时，它是一个没有状态的新页面。这是单页应用程序吗？如果不是，您真的必须通过 url 发送参数，或者决定以另一种方式将其传递给页面，您也可以使用浏览器存储来存储状态，尽管我强烈建议通过参数传递它。
不，我猜我没有存储空间。它不是单页应用程序。但是我确实查看了浏览器存储（我猜你的意思是本地存储），我只是尝试过它，它适用于 Id 输入，我必须为其他输入尝试它。但是使用本地存储是否安全？
这是有问题的，我强烈建议在 URL 中将变量作为参数传递并从那里获取它。我认为您遇到的部分问题是将业务逻辑和大量业务逻辑放在前端，而您应该从服务器进行。我建议查看路由服务器端和客户端并从那里完成这个项目。
我完全明白你在说什么。我认为您认为服务器端是更专业/更好的方式。我将研究郊游服务器端和客户端，因为我不知道如何做到这一点。谢谢@MorganG

标签： javascript html node.js express web

【解决方案1】：

我将在这里进一步回答这个问题，因为我在 cmets 上发帖太长了。

一旦您弄清楚如何进行路由，您就不会想以其他方式进行，这里有一个很好的资源http://expressjs.com/en/guide/routing.html。查看路由参数部分。

所以我要做的是有一个像/populatedForm/:id 这样的路由。在 express 中，它看起来像这样。

app.get('/populatedForm/:id', function(req, res) {
  res.send(req.params);
});

req.params 将获取您想要获取的 id，然后 res.send() 是您可以处理所有业务逻辑的地方路线。这就是我调用数据库以获取该 ID 的所有信息的地方，然后将其作为 json 发送，然后在前端处理 JSON。

看起来像这样

app.get('/populatedForm/:id', function(req, res) {
  var myJson = getIdAndOtherInfoFromDatabase(req.params);
  res.send(myJson);
});

然后您可以通过 JSON 在前端处理所有这些。如果您感到困惑或卡住，我会在 Google 上搜索一下。

【讨论】：