我遇到的问题：

Question

我有一个棘手的问题，因为1周......

在页面上，我有一个这样的简单表格：

<form action="another-page.php" method="post" target="_blank" id="buyCredit">
    <button id="sendPayment">Access to this page</button>
</form>

点击按钮（女巫有sendPayment），我有这个代码：

$('#sendPayment').click(function(event) {
    event.preventDefault();
    $(buyCredit()).done(function(r_buyCredit){
        var json = $(r_buyCredit);
        if(json.type=="success") {
            alert('Success');
            $('form#buyCredit').submit();
        }
        else {
            alert('Error');
            alert(json.mess);
        }
    });

    function buyCredit() {
        $("#loader").toggleClass("hide show");
        return $.post("/assets/php/ajax/dashboard_buyCredit.php", "json");
    }
});

我遇到的问题：

我可以看到我的开发工具，ajax请求。他们很好。
我可以看到alert('Success')。所以它输入了if()。

但是有一件事不起作用：表单未提交。就好像它被另一件事阻挡了......

奇怪的是......

如果我删除此行，则可以正常使用。

return $.post("/assets/php/ajax/dashboard_buyCredit.php", "json");

跳跃你会帮助我！

这是此页面的测试链接： http://goo.gl/Jn4o6y

感谢。

Answer 1

您不需要buyCredit()功能。命名元素ID等函数也不是一个好习惯。也...

您似乎希望通过Ajax发送数据，而不是通过传统的表单传输（即重新加载页面的数据）。但是你的POST调用不会传输任何数据。您可以使用.serialize()将表单转换为可以发布的字符串。
您应该在表单上收听submit事件而不是提交按钮上的click事件。还有其他提交表单的方法（比如按Enter键）。你也想抓住他们。
在提交事件处理程序中使用event.preventDefault()会阻止传统的表单传输。
jQuery为您解码响应。您可以直接使用它，将其包装在$()中并非有用。
您可以使用Ajax调用的.always()回调来可靠地关闭加载动画。

修改后的代码：

$('form#buyCredit').submit(function(event) {
    var formdata = $(this).serialize();

    event.preventDefault();

    $("#loader").removeClass("hide").addClass("show");

    $.post("/assets/php/ajax/dashboard_buyCredit.php", formdata)
    .done(function (result){
        if (result.type === "success") {
            console.log('Success');
        } else {
            console.log('Error', result.mess);
        }
    })
    .fail(function (jqxhr, status, statustext) {
        // an HTTP error has occurred, react to it 
    })
    .always(function () {
        $("#loader").removeClass("show").addClass("hide");
    });
});

允许在jQuery中的post（）之后提交表单

我遇到的问题：

奇怪的是......

1 个答案: