jquery - 使用 Jquery 提交表单而不刷新页面不起作用

Question

我正在尝试提交表单，但不起作用。它只会刷新页面，然后什么都不做。

<form method="post" accept-charset="utf-8" id="contactform" class="pure-form">
  <input type="text" name="name" id="name" class="pure-input-1-2" placeholder="Vor- und Nachname" required>
  <input type="email" name="email" id="email" class="pure-input-1-2" placeholder="E-Mail" required>
  <textarea class="pure-input-1-2" name="message" id="message" rows="10" placeholder="Nachricht" required></textarea>
  <input type="hidden" name="ip" id="ip" value="<?php echo $_SERVER[" REMOTE_ADDR "]; ?>">
  <input type="hidden" name="date" id="date" value="<?php echo date(" Y-m-d H:i:s "); ?>">
  <button type="submit" name="mysubmit" id="mysubmit" class="pure-button pure-input-1-2 pure-button-primary">Nachricht senden</button>
</form>

$('#mysubmit').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'inc/xxx.php',
    data: $('#contactform').serialize(),
    dataType: "text",
    success: function(data) {

    }
  });
});

Answer 1

#mysubmit 是按钮，没有 submit 事件。因此，该表格将作为标准请求提交。

要解决此问题，请 Hook form 元素的 submit 事件:

$('#contactform').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: 'inc/xxx.php',
    data: $(this).serialize(),
    dataType: "text",
    success: function (data) {

    }
  });
});