如何防止表單提交後重新加載頁面 - 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"); 
    }); 
    }); 
});