如何在 JavaScript 中完成 ajax 调用之前暂停进一步执行

Question

实际上，我正在编辑表单中的一些值，同时通过 ajax 从数据库中获取单击一个元素时，我正在打开一个模态框并从服务器获取详细信息并将它们放入适当的表单元素中。

该数据中有密码我想获取该密码的所有区域。

当该 pin 码通过 jQuery 放入文本框中时，我正在调用 jQuery 的keyup()函数，这将触发事件，该事件将调用 Fetching Details Of pincode 的 ajax。

现在我想获取这些详细信息并将适当的数据放入文本框（状态）中，这是完美的。

我想将区域放在城市下拉列表中，但问题是我还想在获取该密码的所有城市后自动选择数据库中的城市。

但问题是模式在此过程完成之前打开，然后显示城市，这很奇怪。

这是我的代码

编辑按钮所在的数据表

<div class="block full">
    <div class="block-title">
        <button type="button" data-toggle="modal" data-target="#modal-add-customer" class="btn btn-effect-ripple btn-primary pull-right" style="overflow: hidden; position: relative;"><span class="btn-ripple animate" style="height: 129px; width: 129px; top: -43.5px; left: -20.9844px;"></span><i class="fa fa-plus"></i> Add <?php echo $page; ?></button>
        <h2><?php echo $page; ?>s</h2>
    </div>
    <div class="table-responsive">
        <table id="example-datatable" class="table table-striped table-bordered table-vcenter">
            <thead>
                <tr>
                    <th class="text-center" style="width: 50px;">ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th style="width: 120px;">Status</th>
                    <th class="text-center" style="width: 75px;"><i class="fa fa-flash"></i></th>
                </tr>
            </thead>
            <tbody>
                <?php
                    $labels[0]['class'] = "label-success";
                    $labels[0]['text'] = "Active";
                    $labels[1]['class'] = "label-warning";
                    $labels[1]['text'] = "Pending..";
                    $labels[2]['class'] = "label-danger";
                    $labels[2]['text'] = "Blocked";
                ?>
                @if($customers->count()>0)
                    @foreach ($customers->get() as $customer)
                    <tr>
                        <td class="text-center">{{$customer->id}}</td>
                        <td>{{$customer->name}}</td>
                        <td>{{$customer->email}}</td>
                        <td>{{$customer->phone}}</td>

                        <td><span class="label{{($labels[$customer->status]['class']) ? " " . $labels[$customer->status]['class'] : ""}}">{{$labels[$customer->status]['text']}}</span></td>
                        <td class="text-center">
                            <a href="javascript:void(0)" title="Information" class="btn btn-effect-ripple btn-xs btn-info info" id="info" data-id="{{$customer->id}}"><i class="fa fa-info"></i></a>
                            <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-effect-ripple btn-xs btn-success edit" id="edit" data-id="{{$customer->id}}"><i class="fa fa-pencil"></i></a>
                            {{-- <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-effect-ripple btn-xs btn-danger"><i class="fa fa-times"></i></a> --}}
                        </td>
                    </tr>
                    @endforeach
                @endif
            </tbody>
        </table>
    </div>
</div>

从数据库中获取详细信息

//script for edit customer
        $(".edit").click(function(){
            var custid=$(this).attr('data-id');
            $("#custid").val(custid);
            $.ajax({
                url:"/edit-customer",
                method:"post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data:{id:custid},
                error: function (error) {
                    console.log(error);
                    $.bootstrapGrowl('<h4><strong>Unsuccess!!!</strong></h4> <p>'+error.statusText+'</p>', {
                        type: "danger",
                        delay: 5000,
                        allow_dismiss: true,
                        offset: {from: 'top', amount: 20},
                        align: "center",
                        width: 400
                    });
                },
                success:function(resp){
                    json=$.parseJSON(resp)
                    // console.log(json);
                    $("#editname").val(json.name);
                    $("#editphone").val(json.phone);
                    $("#editemail").val(json.email);
                    $("#editdob").val(json.birthdate);
                    $("#editpincode").val(json.pincode).keyup();
                    $(document).ajaxStop(function () {
                        $("#editcity").val(json.city).change();
                    });
                    $("#editstate").val(json.state);
                    $("#editaddress").val(json.address);
                    $("#modal-edit-customer").modal("show");
                }
            });
        });

获取 Pincode 的详细信息

//pincode api code to get city and state.
$(".pincode").keyup(function () {
    let pincode = $(this).val();
    if (pincode.length == 6) {
        $(".city option").not(":first").remove();
        $.ajax({
            url: 'https://api.postalpincode.in/pincode/' + pincode,
            type: 'GET',
            error: function (error) {
                // console.log(error);
                $.bootstrapGrowl('<h4><strong>Unsuccess!!!</strong></h4> <p>' + error.statusText + '</p>', {
                    type: "danger",
                    delay: 5000,
                    allow_dismiss: true,
                    offset: {from: 'top', amount: 20},
                    align: "center",
                    width: 400
                });
            },
            success: function (resp) {
                console.log(resp);
                if (resp[0].Status == "Success") {
                    for (var i = 0; i < resp[0].PostOffice.length; i++) {
                        $('.city').append($("<option></option>").attr("value", resp[0].PostOffice[i].Name).text(resp[0].PostOffice[i].Name));
                    }
                    $(".state").val(resp[0].PostOffice[0].State);
                } else if (resp[0].Status == "Error") {
                    $(".state").val("");
                    $.bootstrapGrowl('<h4><strong>Wrong!!!</strong></h4> <p>Pincode is Wrong</p>', {
                        type: "danger",
                        delay: 3000,
                        allow_dismiss: true,
                        offset: {from: 'top', amount: 20},
                        align: "center",
                        width: 300
                    });
                } else {
                    $(".state").val("");
                    $.bootstrapGrowl('<h4><strong>Wrong!!!</strong></h4> <p>Pincode is Wrong</p>', {
                        type: "danger",
                        delay: 3000,
                        allow_dismiss: true,
                        offset: {from: 'top', amount: 20},
                        align: "center",
                        width: 300
                    });
                }
            }
        });
    } else {
        $(".city option").not(':first').remove();
        $(".state").val("");
    }
});

形式模态

<!-- Edit Modal Start-->
<div id="modal-edit-customer" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="btn btn-effect-ripple btn-primary pull-right" data-dismiss="modal"><i class="fa fa-times"></i><i class="fa-solid fa-xmark"></i></button>
                <h3 class="modal-title text-center"><strong>Edit <?php echo $page; ?></</strong></h3>
            </div>
            <div class="modal-body">
            <form id="edit-customer" method="post" class="form-horizontal form-bordered">
                <input type="hidden" name="custid" id="custid" >
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editname">Name <span class="text-danger">*</span></label>
                    <div class="col-md-6">
                        <input type="text" id="editname" name="editname" class="form-control" placeholder="Enter Name..">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editphone">Phone No.<span class="text-danger">*</span></label>
                    <div class="col-md-6">
                        <input type="text" id="editphone" name="editphone" class="form-control" placeholder="Enter the Phone No...">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editemail">Email <span class="text-danger"></span></label>
                    <div class="col-md-6">
                        <input type="text" id="editemail" name="editemail" class="form-control" placeholder="Enter your valid email..">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editdob">DOB <span class="text-danger"></span></label>
                    <div class="col-md-6">
                        <input type="date" id="editdob" name="editdob" class="form-control" placeholder="Enter birthdate..">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editpincode">Pincode <span class="text-danger">*</span></label>
                    <div class="col-md-6">
                        <input type="text" id="editpincode" name="editpincode" class="form-control pincode" placeholder="Enter Your Pincode...">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editcity">City <span class="text-danger">*</span></label>
                    <div class="col-md-6">
                        <select id="editcity" name="editcity" class="form-control city">
                            <option value="">--Please Select City--</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editstate">State <span class="text-danger">*</span></label>
                    <div class="col-md-6">
                        <input type="text" id="editstate" name="editstate" class="form-control state" placeholder="State..." readonly>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="editaddress">Address <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <textarea id="editaddress" name="editaddress" rows="7" class="form-control" placeholder="Enter Your Address.."></textarea>
                    </div>
                </div>
                <div class="form-group form-actions">
                    <div class="col-md-8 col-md-offset-3">
                        <button type="submit" class="btn btn-effect-ripple btn-primary">Submit</button>
                        <button type="reset" class="btn btn-effect-ripple btn-danger">Reset</button>
                    </div>
                </div>
            </form>
        </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>
<!-- Edit Modal End-->

在 laravel/php 中从数据库中获取数据的函数

public function edit(Request $request)
    {
        $customer=Customer::find($request->id);
        return json_encode($customer);
    }

Answer 1

你能移动 $("#modal-edit-customer").modal("show"); 在 $("#editcity").val(json.city).change(); 之后的 ajaxStop 函数内部甚至希望使用 jquery 链接，以便模型调用只能在城市数据加载后进行？ 我希望这有帮助

Answer 2

我在想类似的事情：

$(document).ajaxStop(function () {
    $("#editcity").val(json.city).change();
    $("#modal-edit-customer").modal("show");
});
                    

或者

$(document).ajaxStop(function () {
    $("#editcity").val(json.city).change(function() {
        $("#modal-edit-customer").modal("show");
    });
});

从数据库中获取详细信息 - 用于编辑客户的脚本

因为那是您调用模型显示的地方，但 ajaxStop 可能在此之后运行以加载城市数据，因此在您看到数据之前存在奇怪的模型。 根据您在后续问题中发布的内容，我会说您应该能够做到这一点

$("#editpincode").val(json.pincode).keyup(function() {
  $("#editstate").val(json.state);
  $("#editaddress").val(json.address);
  $('#editaddress').on("custom", function() {
    $("#modal-edit-customer").modal("show");
  });
  $("#editcity").val(json.city).trigger("custom");
});

剂量这个帮助？