Question

我有一个带三个输入的基本表单

<div class="container main-container">
    <form class="form-horizontal" id="my_form">
        <div class="form-group">
            <label for="inputMobile" class="control-label col-xs-3">Mobile</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="inputMobile" name="inputMobile" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputfName" class="control-label col-xs-3">First Name</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="inputfName" name="inputfName" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputlName" class="control-label col-xs-3">Last Name</label>
            <div class="col-xs-9">
                <input type="text" class="form-control" id="inputlName" name="inputlName" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-10">
                <button type="submit" class="btn btn-primary" id="sbtBtn"></button>
            </div>
        </div>
    </form>
</div>

我的目标是在加载此表单之前将一些值注入输入。所以通过CSS，我做

.main-container{
    display:none;
}

然后我有以下Ajax

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading"); },
    ajaxStop: function() { $body.removeClass("loading"); }
});

$(function () {
    $.ajax({
        method: "POST",
        url: "php/obtainData.php",
        dataType: "json",
        data: { dataUrl: window.location.href }
    }).done(function( response ) {
            if(response === false || response === 'false') {
                $('.main-container').css('display', 'none');
            } else {
                $('.main-container').css('display', 'block');
                $('input[name="inputMobile"]').val(response.mobile);
                $('input[name="inputfName"]').val(response.fname);
                $('input[name="inputlName"]').val(response.lname);
            }
        }).fail(function( jqXHR, textStatus  ) {
            console.log(textStatus);
        });
    return false;
});

它本质上做的是从URL中获取一个参数并将其传递给我的后端代码。我的后端然后进行API调用并返回一些值。当它收到响应时，如果没有问题，那么它将显示主容器并将值附加到输入。

现在似乎有效，但我注意到了一些不一致之处。有时，主容器不显示。但是，如果您刷新屏幕几次，它将显示注入的数据。所以我的猜测是API调用没有足够的时间来获取需要注入的数据，或者早期加载了DOM。

我有什么办法可以让它更优化吗？

我还有第二个ajax请求，仅在提交表单时使用。目前我把它放在自己的

中

$(function () {

});

如果在提交表单之前不需要它，如果我使用上面的内容会有什么不同，或者我应该将它放在自己的函数中，该函数是在第一个ajax请求完成回调时调用的吗？

任何建议表示赞赏

由于

Answer 1

总体而言，除非您没有正确使用ajaxStart和ajaxStop，否则代码看起来很正常。

参考：https://api.jquery.com/ajaxStart/

$(document).ajaxStart(function() {
  $body.addClass("loading");
}).ajaxStop(function() {
  $body.removeClass("loading");
});

请记住，ajaxStart / Stop将在所有ajax调用上全局触发。

Ajax - 在页面加载之前注入内容

1 个答案: