【问题标题】:Sending array field between HTML and Node JS在 HTML 和 Node JS 之间发送数组字段
【发布时间】:2017-09-07 05:55:34
【问题描述】:

我正在尝试将一个简单的表单从我的 HTML 页面发送到我的 Node JS 服务器。问题是:我有一个需要用户增加的字段,所以我使用数组来表达它。一切正常,但数组字段在服务器上的 JSON 对象中显示为字符串。


这是服务器的输出:

{ 
    nomeEquipe: 'Team',
    nomeLider: 'Team Lider',
    emailEquipe: 'email@email.com',
    matriculaLider: '10101010',
    senhaLider: '001001001',
    'part[0].nome': 'Partner',
    'part[0].matricula': '666',
    'part[0].email': '666@email.com'
}

我无法访问 part 数组。 part 数组可以增加...


index.ejs(表单和脚本):

    <form method="post" action="/cadastrar">
        <input type="text" name="nomeEquipe" placeholder="Nome da Equipe"><br>
        <input type="text" name="nomeLider" placeholder="Lider da Equipe"><br>
        <input type="email" name="emailEquipe" placeholder="Email do Lider"><br>
        <input type="number" name="matriculaLider" placeholder="Matricula do Lider"><br>
        <input type="password" name="senhaLider" placeholder="Senha de Login"><br><br>
        <input type="text" name="part[0].nome" placeholder="Nome do participante">
        <input type="number" name="part[0].matricula" placeholder="Matricula do participante">
        <input type="email" name="part[0].email" placeholder="Email do participante">

        <div id="participante"></div>
        <br>
        <button type="button" onclick="addParticipante()">Adicionar</button>
        <button type="button" onclick="delParticipante()">Remover</button>


        <br><br>
        <button type="submit">Cadastrar</button>
    </form>

<script>
        var cont = 1;

        function addParticipante() {
                var div = document.createElement('div');
                div.className = 'participante';
                div.innerHTML = '<input type="text" name="part['+cont+'].nome" placeholder="Nome do participante"><input type="number" name="part['+cont+'].matricula" placeholder="Matricula do participante"><input type="email" name="part['+cont+'].email" placeholder="Email do participante">';

                document.getElementById('participante').appendChild(div);
                cont++
        }

        function delParticipante() {
                var select = document.getElementById('participante');
                document.getElementById('participante').removeChild(select.lastChild);
                cont--
        }
</script>


服务器端(路由):

var express = require('express');
var router = express.Router();

var equipe = require('./../models/Equipe')();

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Gincana' });
});

router.get('/cadastrar', (req, res, next) => {
    equipe.find({}, (err, models) => {
        if(err) console.log(err)
        else        res.json(models)
    });
});

router.post('/cadastrar', validador, (req, res, next) => {
    var model = req.body;
    res.send(model);
});

function validador(req, res, next) {
   var model = req.body;

   console.log(model);
   next()
}

module.exports = router;


非常感谢!

【问题讨论】:

    标签: javascript html node.js string object


    【解决方案1】:

    更改元素的命名。应该是part[][]

    <input type="email" name="part[0][email]">
    

    比你有像

    这样的数组
    {part:[
        0: {
            nome: 'Partner',
            matricula: '666',
            email: '666@email.com'
        }
    ]}
    

    【讨论】:

    • 我仍然遇到错误。单引号仍然存在。我无法在我的服务器中访问对象 model.part。我只收到undefined
    • 当打印出模型时你会看到part?
    • 是的。在model = req.body 的情况下。就像我帖子中的输出示例一样。现在'part[0][nome]': 'PAULO H T GLINSKI'。我可以访问其他对象。
    • 您使用的工具有问题,因为&lt;input name="part[0][email]"&gt; 会在 GET 请求中生成数组,但您的服务器将其读取为单级键。
    • 感谢您的警告。默认情况下,问题出在 app.js 文件中的这一行:app.use(bodyParser.urlencoded({ extended: true }));。 (我猜)默认情况下 Express 使用 extended: false 并且必须是 true 才能工作。再次感谢,通过 HTML 中的 chenges 和服务器配置,您解决了我的问题;D
    猜你喜欢
    • 2020-09-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-14
    相关资源
    最近更新 更多