ajax 发布在 chrome 上工作，但在 firefox 和 safari 上不工作答案

【问题标题】：ajax post working on chrome but not working on firefox and safariajax 发布在 chrome 上工作，但在 firefox 和 safari 上不工作
【发布时间】：2020-07-13 09:06:58
【问题描述】：

我遇到了一个问题，即 jquery ajax post 方法适用于 chrome，但不适用于 safari 或 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 已被弃用，因为它对最终用户的体验产生不利影响。在 Firefox 中获取更多帮助http://xhr.spec.whatwg.org/"

编辑：我添加了 contentType:false，但它在 Firefox 和 Safari 上仍然无法正常运行

【问题讨论】：

尝试添加async: true。检查是否有效
@Anvay 我试过了，没有骰子
@LelioFaieta — 你完全错了。提交事件在默认行为发生之前触发。可以在提交事件上使用preventDefault 阻止表单提交。对这类事情使用提交事件是最好的做法。
这只是一个猜测。 .如果您没有特别需要使用processData，请尝试将其删除，看看是否有效！
@Ingus 如果我删除 processData 表单由于某种原因无法完全提交。至少这是一个不同的反应哈哈

标签： javascript php html jquery ajax

【解决方案1】：

您是否尝试将代码包装在准备好的文档中？
另外据我所知，使用 on() 是正确的：

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

目前看来不会有任何问题。 ..

【讨论】：

是的，我的整个 javascript 都包含在 $(document).ready() 中。不幸的是，这不是解决方案

【解决方案2】：

我终于找到了答案。

错误在以下代码行：

 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 工作顺利。

【讨论】：

【解决方案3】：

尽管您已经找到了解决方案，但出于兴趣，我分享了我的解决方案，因为我刚刚遇到了同样的问题，并通过在 success 之后添加 event.preventDefault(); 来获得解决方法。给出示例代码

$(document).ready(function() {

    $('form').on('submit', function(event) {

        $.ajax({
                data: {
                    name: $('#nameInput').val(),
                    email: $('#emailInput').val()
                },
                type: 'POST',
                url: '/post_for_db',
                success: function(data) {
                    console.log(data)
                    $("body").html(data);
                    // This will navigate to your preferred location
                    document.location = '/render_table_from_db';
                },
        event.preventDefault(); // solution is this for me
    });
});

【讨论】：