無法使用jQuery Ajax使我的post（）正常工作

Question

作為HTML，JavaScript及其所有內容，對我來說是非常新的，所以我經常會陷於某個問題。

今天，我的問題是我不確定如何使腳本發布（）到輸入字段中的內容。

我在HTML中有3個輸入字段，當我按下按鈕執行功能時，這些字段應該包含名字，姓氏和電子郵件，並將其發送到數據庫（mysql）。

簡而言之，我的HTML如下所示：

    <form id="regForm">
        <div>
            <label for="firstname">Firstname</label>
            <input id="firstname" type="text" name="firstname"/>
        </div>
        <div>
            <label for="lastname">Lastname</label>
            <input id="lastname" type="text" name="lastname"/>
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" type="email" name="email"/>
        </div>
            <button id="regBtn" type="button">Click Me</button>
   </form>

現在到了棘手的地方:(我的腳本文件：

$(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register")
        //I dont know what to do here// 
    });
});

我已經搜索並嘗試了一些示例，但是我做錯了。 這樣的事情？

   //This is an example//
  $(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register"),
        {
           firstname: "#firstname",
           lastname: "#lastname",
           email: "#email"
        }
    });
});

如何從輸入中發送我的名字，姓氏和電子郵件作為參數？ 請幫助我了解其工作原理。 謝謝。

Answer 1

您需要從輸入中獲取值。

在您的JavaScript中，用$('#firstname').val()替換"#firstname"

這是假設您的名字輸入具有名字的ID

Answer 2

您應該嘗試閱讀jQuery的文檔API 。 在這里，您可以看到如何使用jQuery進行POST調用，包括示例。 這將對您有很大幫助。

但我會給您一些代碼，可能會幫助您朝正確的方向發展。

$(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register", $('#regForm').serializeArray(), function(response) {

        });
    });
});

Answer 3

使用jQuery進行POST的標准方法類似於以下示例：

$.post( "PAGE_URL", { DATA_TO_BE_SENT_GOES_HERE } );

因此，在您的示例中，您將需要使代碼如下所示：

$.post("example.ex/register",
        {
           firstname: $("#firstname").val(),
           lastname: $("#lastname").val(),
           email: $("#email").val()
        });

您的代碼塊的問題是這里的錯字：

$.post("example.ex/register"), {YOUR_DATA};

而正確的應該是：

$.post("example.ex/register", {YOUR_DATA});

在提供應隨調用發送的數據之前，您僅需關閉函數即可。

解決的另一個問題是，您很可能希望在成功接收到數據后通知用戶操作已成功完成，這是通過在調用$.post()時使用以下簽名來完成的：

$.post( "PAGE_URL", { name: "Test", time: "10AM" }, success: FUNCTION_TO_EXCUTE_ON_SUCCESS() );

回到您的代碼，應該是這樣的：

$.post("example.ex/register",
        {
           firstname: $("#firstname").val(),
           lastname: $("#lastname").val(),
           email: $("#email").val()
        },success: function(){
alert("Action completed successfully") // please make a better UI decision than altering the user, this is just an example :)
    });

希望這可以幫助。