javascript - 为什么 "$.ajax({"会刷新？

Question

我想通过 ajax 调用将电子邮件地址插入到我的数据库中。问题来了。它不是在后台工作，而是刷新页面。

alert("yea"); 未到达成功函数。

可能是什么问题？

$(document).ready(function() {
      $("#header-subscribe").click(function(){
        var str = $("#email").val();        
      if( validateEmail(str)) {

        $.ajax({

      url: 'php/signupForm.php',
      type: 'GET',
      data: 'email='+str,
      success: function(data) {
        //called when successful
        alert("yea");
      },
      error: function(e) {
        //called when there is an error
        //console.log(e.message);
      }

    }); 

形式:

<form id="hero-subscribe" class="the-subscribe-form" >
     <div class="input-group">
        <input type="email" class="form-control" placeholder="Enter Your Email" id="email">
        <span class="input-group-btn">
            <button class="btn btn-subscribe" id="header-subscribe" type="submit">subscribe</button>
        </span>
    </div>
</form>

Answer 1

Ajax 调用与刷新无关。您有一个提交按钮，提交按钮的目的是提交表单。

最简单的解决方案是不使用提交按钮:

type="button"

---

但是，将事件处理程序绑定(bind)到按钮的单击事件并不是一个好的做法。因此，与其更改类型，不如将处理程序绑定(bind)到提交事件和 prevent the default action (正在提交表格):

$("#hero-subscribe").submit(function(event) {
    event.preventDefault();
    // ...
});