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"

但是，将事件处理程序绑定到按钮的click事件并不是一种好习惯。因此，而不是更改类型，将处理程序绑定到提交事件和prevent the default action（提交表单）：

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

Answer 2

您需要阻止点击的默认操作...

$("#header-subscribe").click(function(event){
    event.preventDefault();

Answer 3

您应该绑定表单的submit事件并使用event.preventDefault()来阻止事件的默认操作。

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

Answer 4

event.preventDefault()表单操作，否则它会像普通表单一样提交。

$("#header-subscribe").click(function(event){
    event.preventDefault(); //stop the default submit action

为什么“$ .ajax（{”令人耳目一新？

4 个答案: