Question

我已使用AJAX提交表单，第一次提交时，它具有成功功能，但第二次在accept_friend.php而不是#requests_container打印成功数据}，就像普通的PHP表单一样。

$('.accept_friend').submit(function(){
    var data = $(this).serialize();

    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function( data )
        {   
            $('#requests_container').html(data);
        },
        error: function(){
            alert('ERROR');
        }
    });

    return false;
});

这里是accept_friend.php

<?php

session_start();

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

require "classes/class.requests.php";
require "classes/db_config.php";

$current_user = $_POST['current_user'];
$friend_id = $_POST['friends_id'];

$requests = new Requests($DB_con);
if($_SERVER["REQUEST_METHOD"] == "POST"){
     $requests->accept($current_user, $friend_id);
}
?>

Answer 1

您似乎正在替换$('#requests_container')中的整个html，我假设.accept_friend按钮也位于同一个容器中。

如果是这种情况，请尝试使用

替换代码

$('#requests_container').on('submit', '.accept_friend', function(){
    var data = $(this).serialize();

    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function( data )
        {   
            $('#requests_container').html(data);
        },
        error: function(){
            alert('ERROR');
        }
    });

    return false;
});

即使在删除表单按钮并将其放回DOM

之后，这也会使您的事件保持活动状态

Answer 2

我已对此进行了测试，它确实对我有用（Firefox）

在您破坏表单后，将提交事件重新绑定到提交者函数

$('.accept_friend').submit(function submitter() {
    var data = $(this).serialize();

    $.ajax({
        url: "../accept_friend.php",
        type: "POST",
        data: data,
        success: function(data) {   
            $('#requests_container').html(data);
            setTimeout(function() { // may not be needed
                $('.accept_friend').submit(submitter); // rebind submit
            }, 0);
        },
        error: function(){
            alert('ERROR');
        }
    });

    return false;
});

Ajax成功函数第二次不起作用

2 个答案: