更新页面的一部分而不重新加载整个页面答案

【问题标题】：Updating a part of the page without reloading the whole page更新页面的一部分而不重新加载整个页面
【发布时间】：2018-01-31 17:53:14
【问题描述】：

我有一个问题，当有人添加标签而不是整个页面时，我只需要更新网页的一部分。

哈巴狗前端：

  h2 Labels
    each labelName in label
      h4 #{(JSON.stringify(labelName)).substr(1).slice(41, -1).replace(/['"]+/g, '')}
  h2 Add a label 
  form(action='/labeling/#{name}/add_label', method='post', id='insertLabel')
    label(for='insertLabel ') Add label
    input(type='text', value='', name='label', id='insertLabel')
    button(type="submit") submit

点击提交会发出一个post请求，这里的中间件会处理这个请求

router.post('/labeling/:stream_name/add_label', function (req, res, next) {
  overallTime = '00:00:15'
  labelName = req.body.label
  db_label.insertLabel(labelName, overallTime)
  db_label.findLabels((err, labels) => {
    if (err) {
      return res.sendStatus(500)
    }
    res.redirect('/labeling/' + outputName)
})

insertLabel将labelName和overallTime插入到mongoDB中，findLabel带回相关集合中存储了哪些标签，结果如下所示

[ { _id: 5a7201d8a6a06f1627ad75ba, label: 'moo: 00:00:16' },
  { _id: 5a7201e9a6a06f1627ad75bb, label: 'moo2: 00:00:26' } ]

但我在我得到的所有信息中迷失了方向。在这种情况下，我应该使用 Jquery/Ajax，只使用 Ajax、Axios 还是 vanilla Javascript？

【问题讨论】：

您需要根据标签中的数据更新网页的哪个部分？是h2 labels和底层代码吗？
只是 h2 标签部分“ h2 标签标签 h4 中的每个 labelName #{(JSON.stringify(labelName)).substr(1).slice(41, -1).replace(/[' "]+/g, '')}"
您必须使用 ajax 调用并根据响应更新页面，或者如果它不需要来自服务器的响应，您可以使用脚本 (JavaScript) 来更新 DOM .
确保您的控制器正在发送响应数据，而不是重定向到页面或刀片视图。
@dasacodec 我很难将我从 html 得到的答案翻译成哈巴狗，你的评论很有帮助，我会在解决这个问题后发布更新

标签： javascript jquery ajax mongodb pug

【解决方案1】：

jQuery 会很有用。

这需要在页面头部或页面末尾之前结束。

注意：我已重命名您的表单。您必须有唯一的 ID！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function() {
  $("#insertLabelForm").on("submit",function(e) { 
    e.preventDefault(); // stop submission
    // sending all form data - you can also do { "label": $("#insertLabel").val(); 
    // instead of $(this).serialize()
    $.post(this.action,$(this).serialize(),function(data) {
      $.each(data,function(label) { // loop over result
        $("#someContainer").append(label._id+":"+label.label+"<br/>");
      });  
    });  
  });   
});
</script>

【讨论】：

我可以把它放在脚本下吗？
我没有哈巴狗的经验。发布呈现的 HTML。你的代码和需求不清楚
请查看更新。由于您的 ID 冲突，我不得不重命名表单
我感谢 mplungjan 慷慨地贡献他的时间来分享他的知识，这个答案解决了我的问题

【解决方案2】：

我假设您需要在#Lables div 中添加新创建的标签名称。所以我为此使用 Jquery。

您可以将新创建的标签名称附加到 div 中，而不是从表中检索所有标签结果。 （如果成功创建标签就会发生这种情况。）

您应该将结果附加到#Lables

<form id="insertLabelForm" action="/labeling/#{name}/add_label" method="post" id="insertLabel">
    <label for="insertLabel">Add label</label>
    <input type="text" value="" name="label" id="insertLabel"/>
    <button type="submit">submit</button>
</form>

<script>
    $(document).ready(function () {
        $('#insertLabelForm').on('submit',function (e) {
            e.preventDefault();

            var newLableName = $('#insertLabel').val();

            $.ajax({
                url:$('#insertLabelForm').attr('action'),
                method:"post",
                data:$('#insertLabelForm').serialize(),
                success:function () {
                    $('#Lables').append('<h4>'+newLableName+'</h4>');
                }
            })
        })
    })
</script>

【讨论】：