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>

希望这会有所帮助。

发送的数据不仅限于表单（node.js帖子）

2 个答案: