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

Question

                    <div class="tab-pane fade active in" id="actorDiv">
                        <form role="form" id="addActorForm" action="http://localhost:5000/SearchActor" method="post" onsubmit="loading()">
                            <div class="form-group">
                                <label for="actor">Actor Name</label>
                                <input name="actor" class="form-control"
                                       id="actor" placeholder="Enter actor name"/>
                            </div>
                            <input type="reset" class="btn btn-default">
                            <button type="submit" class="btn btn-default" data-loading-text="Sending...">Submit</button>
                        </form>
                    </div>

因此，当我汇总此表单时，会进行 ajax 调用。

<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>

现在，此调用需要很长时间才能返回。我希望在此期间将提交按钮更改为data-loading-text。这是数据加载文本的工作方式吗？如果是这样，为什么它不起作用？ ajax 调用本身可以正常工作并返回。只是不知道为什么data-loading-text 不起作用。

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 的属性，您可以在其中定义一些代码的函数以在开始时运行。您可以使用此函数将按钮的文本更新为“正在加载”，然后当 ajax 调用完成时，您可以再次更新按钮文本。

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