BlockUI jQuery PLugin无法在我的AJAX表单上运行

Question

我正在使用一个表格使用AJAX提交到后端（使用Laravel构建）。我想要当用户单击提交按钮时，调用blockUI jquery插件并显示一个微调器。在服务器响应之后，来自blockUI的微调器应停止并将用户重定向到另一个页面。问题是未在网页上获取块UI。我在页面底部添加了jquery和blockUI脚本标记，但仍然无法正常工作。

在页面底部添加的脚本

<!--Jquery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Block U.I plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

正在提交表单

<form method="POST" action="#" id="form" data-parsley-validate>
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus required data-parsley-passport= ''>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" maxlength="12" required data-parsley-kra = ''>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>
 <button type="submit" class="form-b3c love" id="pay"> Proceed to Payament</button>

</form>

AJAX代码

<script>
    // Get the form via its id
    var form = $('#form');

    $( "form" ).submit(function( event ) {
      //let keyword is used as a local scope
      let form = $( this )
      let formData = new FormData(form[0]);
      event.preventDefault();
      console.log(formData);

      //Check for Parsley validation method
      form.parsley().validate();

      //Returns true if Parsley validation has no errors
      if (form.parsley().isValid()){
        //Call blockU.I plugin
        $.blockUI({ message: ' loading...' });
        $.ajax({
            type: "POST",
            data:formData,
            processData: false,
            contentType: false,
            url: "saveAdd",
            success: function(response){
                //Unblock BlockUI
                $.unblockUI();
                //Page to redirect to
                window.location.href="payment" ;
            },
            failure: function(errMsg) {
                alert(errMsg);
            }
        });
      }
    });
</script>