如何防止表单提交后重新加载页面 - jQuery

Question

我正在为我的应用开发类的网站工作，我有最怪异的问题。

我正在使用一些JQuery发送表单数据到一个名为'process.php的php页面，然后将其上传到我的数据库。奇怪的错误是，页面在提交表单时会重新加载，而我不能或者我的生活不知道如何让JQuery在后台进行。这就是使用JQuery的第一步哈哈。无论如何，我会提交所有相关的代码，让我知道如果你需要别的东西。

<script type="text/JavaScript"> 

$(document).ready(function() { 
    $('#button').click(function() { 

    var name = $("#name").val(); 
    var email = $("#email").val(); 

    $.post("process.php", { 
     name: name, 
     email: email 
    }).complete(function() { 
     console.log("Success"); 
     }); 
    }); 
}); 
</script> 
<div class= "main col-xs-9 well"> 
    <h2 style="color: black" class="featurette-heading">Join our mailing list!</h2> 
    <form id="main" method = "post" class="form-inline"> 
    <label for="inlineFormInput">Name</label> 
    <input type="text" id="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> 
    <label for="inlineFormInputGroup">Email</label> 
    <div class="input-group mb-2 mr-sm-2 mb-sm-0"> 
     <input type="text" id="email" class="form-control" id="inlineFormInputGroup" placeholder="janedoe@email.com"> 
    </div> 
    <!--Plan to write success message here --> 
    <label id="success_message"style="color: darkred"></label> 
    <button id ="button" type="submit" value="send" class="btn btn-primary">Submit</button> 
    </form> 

这是我的PHP如果相关：

<?php 
    include 'connection.php'; 

    $Name = $_POST['name']; 
    $Email = $_POST['email']; 

    //Send Scores from Player 1 to Database 
    $save1 = "INSERT INTO `contact_list` (`name`, `email`) VALUES ('$Name', '$Email')"; 

    $success = $mysqli->query($save1); 

    if (!$success) { 
    die("Couldn't enter data: ".$mysqli->error); 

    echo "unsuccessfully"; 
    } 

    echo "successfully"; 
?> 

这是日志截图：

Answer 1

的<button>元素，当放置在一张表格，将除非另有说明，否则自动提交表格。您可以使用以下两种策略：

1. 使用<button type="button">覆盖默认提交行为
2. 使用event.preventDefault()在onSubmit事件，防止表单提交

解决方案1：

• 优势：简单改变标记
• 缺点：颠覆默认形式行为ior，特别是当JS被禁用时。如果用户想要点击“输入”提交，该怎么办？

插入额外type属性为您的按钮标记：

<button id="button" type="button" value="send" class="btn btn-primary">Submit</button> 

解决方案2：

• 优势：形式将工作，即使JS被禁用，并尊重标准形式UI/UX等至少有一个按钮用于提交

防止发def点击按钮时表单提交。请注意，这是并非理想的解决方案，因为你应该在实际上听提交事件，而不是按钮单击事件：

$(document).ready(function() { 
    // Listen to click event on the submit button 
    $('#button').click(function (e) { 

    e.preventDefault(); 

    var name = $("#name").val(); 
    var email = $("#email").val(); 

    $.post("process.php", { 
     name: name, 
     email: email 
    }).complete(function() { 
     console.log("Success"); 
     }); 
    }); 
}); 

更好的方法：

在该改进中，我们听提交从<form>元件发射的事件：

$(document).ready(function() { 
    // Listen to submit event on the <form> itself! 
    $('#main').submit(function (e) { 

    e.preventDefault(); 

    var name = $("#name").val(); 
    var email = $("#email").val(); 

    $.post("process.php", { 
     name: name, 
     email: email 
    }).complete(function() { 
     console.log("Success"); 
     }); 
    }); 
}); 

更妙的变种：用.serialize()序列化的形式，但记得要加name属性哟乌尔输入：

name的属性需要.serialize()工作，按照jQuery's documentation：

对于形式元素的值被包括在序列化的字符串，该元件必须有名称属性。

<input type="text" id="name" name="name" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> 
<input type="text" id="email" name="email" class="form-control" id="inlineFormInputGroup" placeholder="janedoe@email.com"> 

，然后在JS：

$(document).ready(function() { 
    // Listen to submit event on the <form> itself! 
    $('#main').submit(function (e) { 

    // Prevent form submission which refreshes page 
    e.preventDefault(); 

    // Serialize data 
    var formData = $(this).serialize(); 

    // Make AJAX request 
    $.post("process.php", formData).complete(function() { 
     console.log("Success"); 
    }); 
    }); 
});