php - 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

您实际上并没有向服务器发送任何数据。您需要使用 'data' 参数$.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();
});