ajax пост работает на chrome, но не работает на firefox и сафари

Question

Я столкнулся с проблемой, когда метод публикации jquery ajax работает на chrome, но не работает на сафари или firefox. Я просмотрел все другие похожие сообщения, и они не решают проблему. Всякий раз, когда я запускаю код ajax, он просто возвращает всю HTML страницу, на которой находится форма.

Вот мой javascript:

$("#piece-form").submit(function(e)
{
    e.preventDefault();

    // gets which submit button was clicked
    var selectedButton = $(this).find("input[type=submit]:focus");
    var url = selectedButton.attr("name");
    var formData = new FormData(this);

    $.ajax
    (
        {
            type: "POST",
            url: url,
            data: formData,
            cache: false,
            processData: false,
            success: function(data)
            {
                if(data == "Success!")
                {
                    $("#error-box").css("display", "none");
                    $("#success-box").html("Success! Publishing...");
                    $("#success-box").css("display", "block");
                }
                else
                {
                    $("#success-box").css("display", "none");
                    $("#error-box").html(data);
                    $("#error-box").css("display", "block");
                }
            }
        }
    )
});

Независимо от содержимого файла PHP, на который указывает функция, он работает не так, как планировалось. Я пробовал создать файл PHP с одной строкой эха, но все еще сталкиваюсь с той же проблемой. Я также реализовал блок ошибок в ajax, и он ничего не возвращает. Я также не получаю сообщение об ошибке в консоли, кроме: «Синхронный XMLHttpRequest в основном потоке устарел из-за его отрицательного воздействия на работу конечного пользователя. Для получения дополнительной помощи http://xhr.spec.whatwg.org/» в Firefox

Изменить: я добавил contentType: false, но он по-прежнему не работает должным образом в Firefox и Safari

Answer 1

Наконец-то я нашел ответ.

Ошибка в следующей строке кода:

 var selectedButton = $(this).find("input[type=submit]:focus");
var url = selectedButton.attr("name");

По какой-то причине Firefox и Safari не получают должным образом значение «selectedButton» (хотя Chrome делает), что приводит к неправильной установке переменной url . Чтобы обойти это, я сделал следующее:

 $(".piece-button").click(function (){
    url = $(this).attr("name");
})

Мне нужен был метод submitButton, потому что у меня было две кнопки отправки для формы, и я пытался найти, какая из них была нажата. Этот альтернативный метод делает это и может быть перенесен во все три протестированных мной браузера. Возможно, это не оптимальное решение проблемы отправки с двумя кнопками, но у меня это сработало, и теперь ajax работает без сбоев.

Answer 2

Вы пробовали обернуть свой код в готовый документ?
Также, насколько я знаю, теперь правильно использовать on ():

$( document ).ready(function() {
    $("#piece-form").on('submit', function(e){
        //your main code here
    });
});

На данный момент это не похоже на то, что быть любой проблемой. ..