Question

我将Bootstrap格式的表格用于Parsley验证。问题在于，在加载页面时，“提交”按钮暂时不会执行任何操作。延迟会有所不同，但有时会长达10秒！

代码正在使用wamp-server在本地服务器上运行。我尝试过Opera和Firefox浏览器

$(document).ready(function() {

  // On submit
  $('#form_register').submit(function(e) {

    console.log('Form submitted!');

    // Prevent normal submittion
    e.preventDefault();

    // Validate
    if ($(this).parsley().isValid()) {

      // gather data
      var data = $('#form_register').serialize();

      // send data to server
      $.post('http://127.0.0.1/part/register/ajax_register', data, function(data, textStatus, xhr) {
        // If success
        if (data.code == 0) {

          // Show success emssage
          modal_message('ثبت نام با موفقیت انجام شد', 'success', function(event) {
            // Redirect to login page
            window.location = "http://127.0.0.1/part//login";
          });
        } else {

          // Show error message
          modal_message(data.message, 'danger');
        }
      }, "json");
    } else {
      console.log('Not validated');
    }
  });

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container my-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card border-primary shadow">
        <div class="card-header bg-primary text-white">
          فرم ثبت نام
        </div>
        <div class="card-body">
          <form id="form_register" method="post" data-parsley-validate="">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="username">نام کاربری :</label>
                  <input type="text" name="username" id="username" class="form-control" autocomplete="username" required data-parsley-required-message="نام کاربری را وارد کنید">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="company">شرکت :</label>
                  <select name="company_id" id="company" class="form-control">
                    <option value="1">پارت پلاستیک</option>
                    <option value="2">قطعات محور</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="password">کلمه عبور :</label>
                  <input type="password" name="password" id="password" class="form-control" autocomplete="new-password" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" data-parsley-required-message="کلمه عبور را وارد کنید" data-parsley-pattern-message="کلمه عبور باید حداقل ۸ حرف و شامل حروف بزرگ، کوچک و یک رقم یا کاراکتر خاص باشد.">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="repassword">تکرار کلمه عبور :</label>
                  <input type="password" name="repassword" id="repassword" class="form-control" autocomplete="new-password" data-parsley-equalto="#password" data-parsley-equalto-message="هر دو کلمه عبور باید یکسان باشند">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="first_name">نام :</label>
                  <input type="text" name="first_name" id="first_name" class="form-control" autocomplete="name">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="last_name">نام خانوادگی :</label>
                  <input type="text" name="last_name" id="last_name" class="form-control" autocomplete="family-name">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="mobile_number">تلفن همراه :</label>
                  <input type="text" name="mobile_number" id="mobile_number" class="form-control" autocomplete="mobile" pattern="^09\d{9}$" data-parsley-pattern-message="شماره تلفن همراه اشتباه است">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="phone_number">تلفن ثابت :</label>
                  <input type="text" name="phone_number" id="phone_number" class="form-control" autocomplete="tel" pattern="^\d{8,12}$" data-parsley-pattern-message="شماره تلفن اشتباه است">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="address">آدرس پستی :</label>
                  <input type="text" name="address" id="address" class="form-control" autocomplete="street-address">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="date_birth">تاریخ تولد :</label>
                  <input type="text" name="date_birth" id="date_birth" class="form-control" autocomplete="bday" placeholder="0000-00-00" pattern="^\d{4}-\d{1,2}-\d{1,2}$" data-parsley-pattern-message="فرمت تاریخ تولد اشتباه است" value="1985/01/01">
                </div>
              </div>
            </div>
            <div class="form-group">
              <input type="submit" value="ثبت نام" class="btn btn-primary btn-submit">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

延迟是因为您已将表单提交代码放置在$（document）.ready（function（）{}）

中

因此，一旦显示完整的dom，便会执行表单提交代码。

如果您不想等到DOM加载完毕。然后将表单提交代码放在document.ready函数之外。

Answer 2

$(document).ready(....)表示要在所有DOM元素加载后运行其中的所有功能。只需在您需要的范围之外使用即可。如果要传递的值还很少，只需使用ajax，它也将克服此问题。

$.ajax({
    type : "GET",
    url : "http://127.0.0.1/part/register/ajax_register", 
    data : {'data':data },
    contentType: "application/json; charset=utf-8",
    cache : false,
    async:true, //asynchronous,No need to wait for the response
    success : function(data) {  
        //your statements
    },
    error : function(data) {
        //your statements
    }
})

加载页面后，表单提交按钮无法立即使用

2 个答案: