Question

我正在一个歌曲站点上，您可以在其中对歌曲，歌手等进行评分，还可以选择将它们添加到收藏夹中。

一段时间后，我注意到从收藏夹中添加/删除歌曲/歌手时，我几乎重复了相同的ajax请求，但仅使用了不同的反馈消息，因此我决定创建一个将该请求的function分开，在其他方法中，我称之为“

”。

为此，我在favourite函数的参数中设置了按钮的路线，反馈，消息等内容，如下所示。

我相信feedback()函数并不是很重要，我只是分享了某个人是否想知道它的外观，或者他们是否真的觉得它很重要。

function feedback($feedback_route,$message_route,$alert_class,$message){
    $($feedback_route).removeClass("d-none");
    $($feedback_route).addClass($alert_class);
    $($feedback_route).addClass("animated fadeIn");
    $($message_route).html($message);
    setTimeout(() => {
        $($feedback_route).addClass("animated fadeOut");
    }, 2000);
    setTimeout(() => {
        $($feedback_route).addClass("d-none");
        $($feedback_route).removeClass($alert_class);
        $($message_route).html("");
    }, 2500);
}

function favourite($ajax_route,$post,$button_route,$event,$feedback_route,
        $message_route,$success_message,$error_message){
        $.ajax({
            url: $ajax_route,
            type: "post",
            data: {
                $post: $($button_route).attr("value"),
                event:$event
            },
            success: (data) => {
                 feedback($feedback_route,$message_route,"alert-success",$success_message);
                setTimeout(() => {
                    $($button_route).replaceWith(data);
                }, 2500);
            },
            error: () => {
                feedback($feedback_route,$message_route,"alert-danger",$error_message);
            }
        });
    }

//-------------------------------ADD SONG TO FAVOURITES-----------------------------
$("#song-info-container #song-container").on("click","#add-to-favourites", () => {
    favourite(
        "ajax/song-favourite.php",
        "songID","#song-info-container #song-container #add-to-favourites",
        "add","#song-info-container #song-container .feedback",
        "#song-info-container #song-container #message",
        "Added!","Failed to add!"
        );
    $("#song-info-container #song-container .feedback").removeClass("animated fadeOut");
});

原始ajax请求的外观如下：

$("#song-info-container #song-container").on("click","#add-to-favourites", () => {
    $.ajax({
        url: "ajax/song-favourite.php",
        type: "post",
        data: {
            songID: $("#song-info-container #song-container #add-to-favourites").attr("value"),
            event:"add"
        },
        success: (data) => {
            feedback("#song-info-container #song-container .feedback",
                "#song-info-container #song-container #message","alert-success","Added!");
            setTimeout(() => {
                $("#song-info-container #song-container #add-to-favourites").replaceWith(data);
            }, 2500);
        },
        error: () => {
            feedback("#song-info-container #song-container .feedback",
                "#song-info-container #song-container #message","alert-danger","Failed to add!");
        }
    });
    $("#song-info-container #song-container .feedback").removeClass("animated fadeOut");
});

现在是实际的问题：首先，我认为它确实有效，因为出现的反馈带有正确的消息，但是消失之后（请参见setTimeOut函数），以下内容消息出现：

Notice: Undefined index: songID in G:\x\htdocs\AniSong\ajax\song-favourite.php on line 9

因此，在favourite函数的参数中设置的数据也不会传递到另一个文件。

有人知道为什么会这样吗？

还是我不能首先发出这样的ajax请求？

PS：很抱歉，如果标题没有意义，真的不知道应该怎么问。

Answer 1

这不符合您的期望：

{
    $post: $($button_route).attr("value"),
    event: $event
}

这不会将$post替换为您要传递给函数的字符串值。这为属性提供了文字名称$post。检查浏览器调试工具的“网络”选项卡，以查看实际发送到服务器的内容。没有songID属性。

验证的快速测试：

let $foo = 'test';
console.log({$foo: 'baz'});

如果要动态发送此信息，则需要修改数据结构来做到这一点。与动态“事件”类似，现在需要动态“发布”。像这样：

{
    post: $post,
    value: $($button_route).attr("value"),
    event: $event
}

然后，在服务器端代码中，您将更改逻辑以检查post参数，以查看要更新的字段，或者正在使用服务器端的此类逻辑。

或者，对我而言，您可能会创建一个动态属性名称。考虑这样的事情：

let $post = 'songID';
let data = {
    event: 'add'
};
data[$post] = 'test value';
console.log(data);

由您自己决定，您认为这要比您更容易支持。

将函数参数传递给Ajax数据返回未定义的索引错误

1 个答案: