发送比表单更多的数据（node.js post）

Question

当有人提交表单时，它是否可以发送其他内容而不仅仅是输入字段？ 在我的情况下，它将是用户名。

Answer 1

您始终可以拦截表单的提交并手动进行处理。 实际上，如果您想事先验证表单字段，那么无论如何应该这样做。

逻辑非常简单。 您将一个onsubmit事件侦听器附加到窗体。 通过在事件上调用preventDefault()来防止自动提交。 然后从所有字段中收集值，进行验证（ 如果电子邮件格式正确，密码匹配等 ），将任意随行属性添加到对象，然后通过ajax发布请求将整个内容发布到服务器。

由于您正在问这样的问题，我建议您使用一些JS库来简化它， jQuery非常适合这种情况：

 $('#myForm').on('submit', function(e) { e.preventDefault(); const $form = $(this); const method = $form.attr('method'); const action = $form.attr('action') const fields = $form.serializeArray(); fields.push({ name: 'username', value: 'myUsername' }) const queryStr = $.param(fields); $[method](action, queryStr) .done(function() { // submission was successful - do something, refresh page for exmaple }) .fail(function() { // submission failed }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myForm" method="post" action="/handle.php"> My name is: <input type="text" name="fname" /><br /> <label for="agree">I agree</label> <input type="checkbox" name="agree" value="1" /><br /> <button type="submit">Submit</button> </form> 

当然/handle.php是伪造的终结点，因此在此处提交显然不起作用。

Answer 2

就像@jayarjo所说的那样，您可以拦截表单提交并手动处理它，例如，可以按以下方式使用Ajax。

注意：; 要使用Ajax，请确保添加例如其脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>


  $('#newform').on('submit', function (event) {
    event.preventDefault();
    var data = {
      username: $('#username').val(),
    };

    $.ajax({
      url: '/upload',
      data: data,
      method: 'POST'
    }).then(function (response) {

      $('body').append(response);
    }).catch(function (err) {
      console.error(err);
    });
  });
</script>

希望这可以帮助。