Question

我试图学习使用JavaScript与nodejs一起制作一个webapp。如果我正确地做到了这一点，我想出了所有的想法，并且不知道。所以我想要做的是当用户点击动态创建的表的一行时，它打开一个新的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页面，但输入设置为undefined。我没有做其余的事，因为我无法工作。

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

Answer 1

我将在此处进一步回答这个问题，因为我在评论中发帖太长了。

一旦你弄清楚如何做路由，你就不想以另一种方式去做，这里有一个很好的资源http://expressjs.com/en/guide/routing.html。查看路由参数部分。

所以我要做的就是拥有像/populatedForm/:id这样的路线。在表达中它看起来像这样。

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处理前端的所有内容。如果你感到困惑或卡住，我会稍微谈谈这些事情。

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

1 个答案: