如何使用Javascript和Node js从表单传递数组

时间:2018-10-09 17:18:34

标签: javascript jquery node.js

我正在使用表格来收集数据。表单中包含一个存在tbody的部分,该部分开始时为空。使用很少的功能,就可以用数组中的数据填充这个体式。该数组在js文件中访问。完成表单的所有方面之后,表单中的大多数数据都会发送到我的index.js路由文件中的发布请求中。大多数数据项都通过其name属性(例如req.body.nameOfInputField)进行访问。

我应该如何在req.body中发送数组或访问它?

main.hbs

<form autocomplete="off" action="/post-prop" method="post" onsubmit="return validateForm()" id="post-prop-form" enctype="multipart/form-data" class="col-lg-12">

<div class="row">
..
<table id="tableId">
..
<tbody id="bodyId">
</tbody>
..
</table>
..
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

main.js

let arr = [];

$(function(){
...
//Various functions called such as add, edit, delete are used for 'arr'
//These changes seen in tbody
}

function validateForm(){
    //This function is called onsubmit of form
    // What should be placed here or anywhere else
    // so I can send my 'arr' to POST route in index.js
}

index.js

router.post('/post-prop', isLoggedIn, upload.single('image'), function(req, res, next){
        const data = new Data({
             data1 : req.body.data1,
             data2 : req.body.data2,
             array : //What should be placed here for 'arr'
        });
});

我尝试在网上冲浪,但是找不到与我的问题有关的任何东西。

更新

我没有使用任何AJAX函数调用。这是从我的表单发送的简单邮寄请求。 index.js中存在的“数据”模型使我可以向模型的属性中添加值,因此我只能在发送data之后对其进行定义。

按照@sigfried建议的答案,我在相应文件中添加了以下代码

main.js

function validateForm(){
....
  const data = {
        fields: arr
    };
    jQuery.ajax({
        data: JSON.stringify(data),
        content: 'application/json'
    });
...
}

index.js

router.post('/post-prop', isLoggedIn, upload.single('propImage'), function(req, res, next){
    console.log(req.body.fields); //However this comes as undefined
...
}

我希望我不会对以错误的方式实施它有所了解。

2 个答案:

答案 0 :(得分:1)

尝试从多部分表单数据访问和数组有些棘手,但是您可以检查req.body并弄清楚,在这种情况下,对我来说最好的解决方案是,因为我认为您再次使用 jQuery 或本机 XMLHttpRequest Fetch ,您可以将表单内容作为 application / json 发送>,快速的jQuery示例:

const data = {
  fields: [1, 2, 3]
}
jQuery.ajax({
   data: JSON.stringify(data),
   contentType: 'application/json'
})

然后在您的快速路线中,您可以非常舒适地访问,例如:

app.post('/route', function(req, res) {
    const fieldsArray = req.body.field;
})

希望这会有所帮助,加油。

答案 1 :(得分:0)

您可以简单地创建数据的json对象。 json对象可能包含嵌套的对象,数组等。然后JSON.stringify数据并将其发送到节点。 设置content-type: application/json

是一个好习惯

在节点级别,您只需执行var obj = JSON.parse(req.body.data),它将返回您编码的javascript对象。

您可以在这里参考:Javascript : Send JSON Object with Ajax?