Question

我正在尝试创建一个表单。您输入信息，点击提交，然后会打开一个新页面，显示您提交的内容。底部还有一个按钮，它会重定向到一个新页面，其中包含您输入的所有不同联系信息。

我在将一个变量从我的JavaScript文件传递到EJS文件（formserver.js到contacts.ejs）时出现问题。我一直收到一个错误，我的对象数组尚未通过（contacts.ejs第16行）。

我想知道是否有人可以帮助解释为什么我的Object数组没有被传递到EJS文件中，以及我可以做些什么来解决这个问题。

以下是代码：

formserver.js

var connect = require("connect");
var logger = require("morgan");
var http = require("http");
var ejs = require('ejs');
var bodyparse = require('body-parser');


var app = connect()
    .use (logger('dev'))
    .use (bodyparse())
    .use (serve);

http.createServer(app).listen(3000);

var allInfo = new Array;

function serve(req, res)
{
    //console.log("Entered ", req.url);
    var gender = req.body.gender;
    var firstName = req.body.firstName;
    var lastName = req.body.lastName;
    var street = req.body.street;
    var city = req.body.city;
    var state = req.body.state;
    var zip = req.body.zip;
    var phone = req.body.phone;
    var email = req.body.email;
    var contact = req.body.contact;
    var mail = req.body.mail;

    var form = {gender: gender, fname : firstName, lname : lastName, street : street, 
            city : city, state: state, zip: zip, phone : phone, email: email, mail: mail }



    if (req.url == "/mailer")
    {

        })
}

contacts.ejs

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> <% allInfo %> </p> 
<table>
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Phone</th>
        <th>Email</th>
        <th>Contact by mail?</th>
    </tr>

    <% for (var person in allInfo) { %>
    <tr>
        <td><%= allInfo[i].gender %>. <%= allInfo[i].fname %> <%= allInfo[i].lname %></td>              
    </tr>

    <tr>
        <td> <%= street %>, <%= city %>, <%= state %> <%= zip %></td>
    </tr>

    <tr>
        <td><%= phone %></td>
    </tr>

    <tr>
        <td><%= email %></td>
    </tr>

    <tr>
        <td><%= mail %></td>
    </tr>

    <% } %>
</table>

mailer.ejs

    <!DOCTYPE html>
    <html>
    <body>
    <form action = "/submit" method = "post">
        <fieldset style = "width:500px">
        <p>
            <div>
            <input type = "radio" name = "gender" value = "Mr"> Mr. 
            <input type = "radio" name = "gender" value = "Mrs"> Mrs. 
            <input type = "radio" name = "gender" value = "Ms"> Ms. 
            <input type = "radio" name = "gender" value = "Dr"> Dr. 
            </div>
        </p>
        <p>
        <div>
            <label  for = "first">First Name: </label>
            <input type = "text" name = "firstName" required>
            <label for = "last">Last Name:</label>
            <input type = "text" name = "lastName" required>
        </div>
        </p>
        <p>
        <div>
            <label for = "street" > Street: </label>
            <input type = "text" name = "street" location = "street">
            <label for = "city" name = "city"> City: </label>
            <input type = "text" name = "city" location = "city">
        </div>
        </p>
        <p>
        <div>
            <label id = "state" for = "state" name = "state">State: </label>
            <select name = "state" id = "state">
                <option value = "" disabled = "disabled" selected = "selected"> </option>
                <option value = "NJ""> NJ </option>
                <option value = "NY"> NY </option>
                <option value = "PA"> PA </option>
                <option value = "CT"> CT </option>
            </select>
            <label for = "zip"> Zip: </label>
            <input type = "text" name = "zip" location = "zip">
        </div>
        </p>

        <p>
        <div>
            <label for = "phone" >Phone:</label>
            <input type = "text" name = "phone" location = "phone">
        </div>
        </p>

        <p>
        <div>
            <label for = "email" >Email:</label>
            <input type = "text" name = "email" location = "email">
        </div>
        </p>

        <p>
        <div>
            <label for = "contact" name = "contact"> How may we contact you? </label>
            <input type = "checkbox" name = "contact" value = "yPhone"> Phone </input>
            <input type = "checkbox" name = "contact" value = "mail"> Mail </input>
            <input type = "checkbox" name = "contact" value = "yEmail"> Email </input>
            <input type = "checkbox" name = "contact" value = "any" checked> Any </input>
        </div>
        </p>
        </fieldset>

        <div>
            <button type = "submit" name = "submit" value = "submit"> Send me spam forever! </button>
        </div>
    </form>
        <p><a href = "/contacts"> View list of contacts! </a></p>
    </body>
    </html>

submit.ejs
<!DOCTYPE html>
<html>
<head> 
    <title></title>
</head>
<body>
    <div><strong> Contact Information Submitted </strong></div>
    <div><strong> Name: <%= gender %>. <%= fname %> <%= lname %> </strong></div>
    <div><strong> Address: <%= street %>, <%= city %>, <%= state %> <%= zip %></strong></div>
    <div><strong> Contact by Phone: <%= phone %> </strong></div>
    <div><strong> Contact by Mail: <%= mail %></strong></div>
    <div><strong> Contact by Email: <%= email %> </strong></div>


    <p><a href = "/contacts"> View list of contacts! </a></p>
</body>
</html>

Answer 1

改变这个：

render (res, "contacts", allInfo);

到此：

render (res, "contacts", {allInfo: allInfo});

如果没有对象包装器，模板将只传递一个数组，它就不会知道你调用了它allInfo。

您在模板中也存在不一致性，同时使用i和person作为迭代变量。我建议将其更改为：

<% for (var i = 0 ; i < allInfo.length ; i++) { %>

或者您可以将其更改为forEach。

您也遇到过某些字段的问题，例如：

<%= street %>

应该是这样的：

<%= allInfo[i].street %>

如何将对象数组（Node.JS）传递给EJS文件

1 个答案: