使用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) {

    }
  });
});

- 123php

---

你的事件监听器附加到了错误的元素上。应该是$('#contactform').submit。 - sheng

submit 是一个表单事件。click 则是一个按钮 (#mysubmit) 事件。 - sheng

是的，就是这样。非常感谢你。我没看到那个。 - 123php

Answer 1

#mysubmit是一个按钮，它没有一个submit事件。因此表单被提交为一个标准请求。

为了解决这个问题，应该将事件挂钩到form元素的submit事件上：

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

    }
  });
});

- Rory McCrossan

---

非常感谢你！ - 123php

没问题，很高兴能帮忙。 - Rory McCrossan