javascript - 将值传递给不同的网页表单

Question

我正在尝试学习使用 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/>

这就是我的 table 的样子

这就是当我单击表中的一行时输入的样子。它打开新的 html 页面，但输入设置为未定义。我还没有完成剩下的事情，因为我无法让 id 工作。

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

Answer 1

我将在这里进一步回答这个问题，因为我在评论中发布的内容太长了。

一旦你弄清楚如何进行路由，你就不会想用其他方式来做，这里有一个很棒的资源 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 的所有业务逻辑路线。在那里，我会调用数据库来获取该 ID 的所有信息，然后将其作为 json 发送，然后在前端处理该 JSON。

它看起来像这样

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

然后你可以通过 JSON 在前端处理所有这些。如果您感到困惑或陷入困境，我会用谷歌搜索一下有关这些内容的信息。