Question

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

帕格前端：

  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

单击“提交”会发出一个帖子请求，该请求将在此处的中间件中处理

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吗？

Answer 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>

Answer 2

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

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

您应该将结果附加到#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>

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

2 个答案: