Передача параметра функции в данные ajax возвращает неопределенную ошибку индекса

Question

Я работаю над сайтом песен, где вы можете оценивать песни, исполнителей и т. Д., И у вас также есть возможность добавить их в избранное.

Через некоторое время я заметил, когда добавляю/ удалить песню / исполнителя из списка избранных, я в значительной степени повторяю один и тот же запрос ajax несколько раз, только с другим сообщением обратной связи, поэтому я решил создать отдельный function этого запроса, а в других методах я просто вызываюthis.

Для этого я установил такие параметры, как маршрут кнопки, обратная связь, сообщение и т. д., в параметре функции 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 function ), появляется следующее сообщение:

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, чтобы увидеть, какое поле вы обновляете, или какую бы логику вы не использовали для сервера. -side.

В качестве альтернативы мне просто кажется, что вы можете создать динамическое имя свойства. Рассмотрим что-то вроде этого:

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

Вам решать, что вы считаете более сложным, и что вам легче поддерживать.