Question

我有一个输入，当用户键入逗号时，该输入将字符串转换为“样式标签”，然后，在提交表单时，将字符串推入名为“ content”的数组中。

在EJS视图上，我正在打印类似<%= course.content %>的结果，但是得到的结果是'string1,string2,string3,string4'，我要得到的是，当将其推入数组时，每个字符串必须是一个不同的元素：

content ['string1','string2','string3','string4']

只有这样，它才能通过循环数组在我的视图中正确呈现。我只想通过javaScript或jQuery来实现。

更新：这就是我在视图中呈现的方式

<ul>
   <% var i; for (i = 0; i < course.content.length; i++) { %>
     <li><i class="fas fa-check"></i> <%= course.content %></li>
   <% }; %>
</ul>

更新：这是我执行此POST请求的路线

router.post("/", middleware.isLoggedIn, function(req, res) {
  Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     }
       res.redirect("/courses/" + course.id);
  });
});

已解决！通过像这样在服务器端使用split：

router.post("/", middleware.isLoggedIn, function(req, res) {
   Course.create(req.body.course, function(err, course) {
     if (err) {
       req.flash("error", err.message);
       return res.redirect("back");
     } else {
       var content = req.body.course.content.toString().split(",");
       course.content = content;
       course.save();
       console.log(course.content);
       res.redirect("/courses/" + course.id);
     }
   });
});

这是使用@garry man的 function beforesubmit（）函数的javaScript中的另一个解决方案。

codepen

Answer 1

好的，问题在于您提交的表单包含一个只能包含字符串值的单个输入。

HTML表单的做法是每个要发布的数组元素只有一个输入，例如：

<input name="course[content]"/> //value 1
<input name="course[content]"/> //value 2
<input name="course[content]"/> //value 3

因此，为了实现这一点，您可以在提交之前调用此函数，该函数为您生成这些元素：

function beforesubmit(){
  let submitVal = document.getElementById('hiddenInput');
  let values  = submitVal.value.split(',');

  //let's get the container of the params passed to post
  let paramsContainer = submitVal.parentElement;
  // remove the param containting the string with commas as we're generating new ones
  paramsContainer.removeChild(submitVal); 

  for(let i =0; i<values.length;i++){
    //for each value, add a submit param containing each value
    let tmp = document.createElement('input');
    tmp.setAttribute('type','hidden');
    tmp.setAttribute('name','course[content]');
    tmp.setAttribute('value',values[i]);
    paramsContainer.appendChild(tmp);
  }
  document.getElementsByTagName('form')[0].submit();
}

要调用此函数，请用以下内容替换您的submit input：

<input type="button" value="submit" onclick="beforesubmit()">

使用此代码，您已经可以看到POST请求之间的区别。在您的Codepen中，它发送一个参数，而在这段代码中，您将发送一个course['content']数组。

现在一切都取决于要检索数据服务器端的方式，您应该将course['content']参数作为数组进行检索。

Answer 2

很远

否则，有一种解决方法是输入的标签数量太多，应该生成的输入元素数量也很多。

例如我的输入标签是foo,bar，那么将生成2个输入标签，如

                                                            Note square brackets below
<input id="hiddenInput" type="hidden" name="course[content][]" required>
<input id="hiddenInput" type="hidden" name="course[content][]" required>

这是很长的路要走。

另一种方式

如果您通过AJAX提交表单，则可以在提交之前处理数据，并使用.split(',')将字符串转换为数组。

另一种方式（服务器端）

在服务器端用,分割字符串。

插入逗号时分割字符串并将其添加到字符串数组

2 个答案:

很远

另一种方式

另一种方式（服务器端）