Question

<script type="text/javascript">
    var frm = $('#addActorForm');
    frm.submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" +
                    "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                    "  <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" +
                    "</div>";
            },
            error: function (data) {
                console.log('An error occurred.');
                // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" +
                //     "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                //     "  <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" +
                //     "</div>";
                console.log(data);
            },
        });
    });
</script>

因此，当我对此表单进行求和时，会进行ajax调用。

data-loading-text

现在，此调用需要很长时间才能返回。我希望在此期间将提交按钮更改为data-loading-text。这是数据加载文本的工作原理吗？如果是这样，为什么它不起作用？ ajax调用本身工作并返回正常。只是不知道为什么perl -MURI -ple 'my $u = URI->new($_); $u->path("XXXX"); $u->_port("XXXX") if $u->_port; $_ = $u'无效。

Answer 1

您可以使用beforeSend并完成：

<script type="text/javascript">
var frm = $('#addActorForm');
frm.submit(function (e) {
    e.preventDefault();
    $.ajax({
        beforeSend: function(){
            button = $("#addActorForm button[type=submit]");
            button.html(button.attr("data-loading-text"));
        },
        complete: function(){
            $("#addActorForm button[type=submit]").html("Submit");
        },
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            document.getElementById("actorDiv").innerHTML += "<div class=\"alert alert-dismissible alert-success\">\n" +
                "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
                "  <strong>Well done!</strong> You successfully read <a href=\"#\" class=\"alert-link\">this important alert message</a>.\n" +
                "</div>";
        },
        error: function (data) {
            console.log('An error occurred.');
            // document.getElementById("actorDiv").innerHTML = "<div class=\"alert alert-dismissible alert-danger\">\n" +
            //     "  <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>\n" +
            //     "  <strong>Oh snap!</strong> <a href=\"#\" class=\"alert-link\">Change a few things up</a> and try submitting again.\n" +
            //     "</div>";
            console.log(data);
        },
    });
});

Answer 2

$ .ajax（）有一个名为beforeSend的属性，您可以在其中定义一些代码的函数，以便在开始时运行。您可以使用此功能更新按钮的文本以“加载”＃39;然后当ajax调用完成时，您可以再次更新按钮文本。

http://api.jquery.com/jquery.ajax/

数据加载文本不适用于表单

2 个答案: