javascript - 发送比表单更多的数据(node.js post)

Question

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

Answer 1

你总是可以拦截表单的提交并手动处理它。事实上，如果您想事先验证表单字段，无论如何您都应该这样做。

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

既然你问的是那种问题，我会推荐使用一些 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 是一个假端点，所以在这里提交显然是行不通的。