jQuery Ajax請求和PHP

Question

Jquery的新手，甚至是Jquery Ajax調用的新手-這是我的問題：

我有一個小的表格-電子郵件地址提交-觸發到一個PHP文件，該文件將電子郵件插入表格中。

我要執行以下操作：

1. 通過Ajax處理表單提交，因此不會刷新
2. 成功寫入表格后，我想將“提交”按鈕的文本更改為“成功！”。 3秒鍾，然后返回帶有淡入和淡出效果的“注冊”。

這是我的表格代碼：

<form action="" id="registerform" name="registerform" method="post" >
    <input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
    <button id="join" type="submit" name="join" onClick="validate()">Sign Up</button>
</form>

這是我通過Jquery處理POST請求的可怕嘗試：

$('form').on('submit', function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});

誰能評論如何使Ajax請求工作（似乎沒有）？

提前致謝！

更新資料

好了，下面的Jquery塊將數據添加到表中，但是，我的按鈕文本沒有更改：

 $('form').on('submit', function(e) {
        $.post('register.php', $("#registerform").serialize(), function() {
            $('#join').html('Success!')             
        });        
    //disable default action
    e.preventDefault();
    });

現在有什么想法嗎？

Answer 1

這是我的一個ajax調用示例

details = "sendEmail=true&" + $("form").serialise();

$.ajax({
    url: "yourphppage.php",
    type: "post",
    data: details,
    success: function (data, textStatus, jqXHR) {
        if (data == "false") {
            console.log("There is a problem on the server, please try again later");    
        } else {
                //Do something with what is returned
        }
    }
})          

在服務器端

if (isset($_POST['sendEmail'])) {
  //Do something with the data
}

當然，這只是一個示例，您可能需要更改此設置以適合您的需求：)

要注意的一件事是if (data == "false") 。 在服務器端，我可以echo "false"以告訴ajax調用不成功。

Answer 2

您實際上並沒有向服務器發送任何數據。 您需要使用$.post的“數據”參數發送數據。

$('form').on('submit', function(e) {
    $.post('register.php', $(this).serialize(), function() {
        $('#join').html('Success!');             
    });        
    //disable default action
    e.preventDefault();
});

Answer 3

不確定，但是POST請求是否發送任何內容？ 嘗試在POST請求中添加數據。

$('form#registerform').submit(function() {
  var email = $(this).find('input[name=email]').val();
  $.post('register.php', {email: email}, function() {
    $('#join').html('Success!');             
  }); 

  return false;
});

Answer 4

您要在哪里將表單數據通過ajax調用推送到服務器？ 將代碼更改為此。

var data = {$("#email").val()};
$('form').submit(data ,function(e) {
    $.post('register.php', function() {
            $('#join').html('Success!')             
    });        
    //disable default action
    e.preventDefault();
});