Question

我在我的控制台中遇到此错误，导致我在AJAX Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.中以两种不同的形式阻止我的验证。我的表单工作正常，但这个控制台日志困扰着我。

我只会在脚本中添加代码以避免混淆。

这两种形式（onblur调用ajax验证）

edit.blade.php

<div class="main-content">

  <!-- You only need this form and the form-basic.css -->

  <form class="form-basic" method="post" id="myEditForm" action="/edit">

    <div class="form-title-row">
      <h1>Edit User</h1>
    </div>

      <input type="hidden" name="userid" id="editFormUserId">

    <div class="form-row">
      <label>
        <span>Firstname</span>
        <input type="text" name="firstname" id="editFormFirstName" onblur="validateEditForm('divfirstnameEditForm', this.value)">
      </label>
    </div>
    <div id="divfirstnameEditForm"></div>

    <div class="form-row">
      <label>
        <span>Lastname</span>
        <input type="text" name="lastname" id="editFormLastName" onblur="validateEditForm('divlastnameEditForm', this.value)">
      </label>
    </div>
    <div id="divlastnameEditForm"></div>

    <div class="form-row">
      <label>
        <span>Password</span>
        <input type="password" name="password" id="editFormPassword" onblur="validateEditForm('divpasswordEditForm', this.value)">
      </label>
    </div>
    <div id="divpasswordEditForm"></div>

    <div class="form-row">
      <input class="button" type="button"  onclick="fetchUser()" value="Submit" />
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    </div>
  </form>
</div>

create.blade.php

<div class="main-content">

  <!-- You only need this form and the form-basic.css -->

  <form class="form-basic" method="post" id="myForm" action="/create">

    <div class="form-title-row">
      <h1>Create User</h1>
    </div>

    <div class="form-row">
      <label>
        <span>Firstname</span>
        <input type="text" name="firstname" id="firstname1" onblur="validate('firstname', this.value)">
      </label>
    </div>
    <div id="firstname"></div>

    <div class="form-row">
      <label>
        <span>Lastname</span>
        <input type="text" name="lastname" id="lastname1" onblur="validate('lastname', this.value)">
      </label>
    </div>
    <div id="lastname"></div>

    <div class="form-row">
      <label>
        <span>Password</span>
        <input type="password" name="password" id="password1" onblur="validate('password', this.value)">
      </label>
    </div>
    <div id="password"></div>

    <div class="form-row">
      <input class="button" onclick="checkForm()" type="button" value="Submit" />
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    </div>
  </form>
</div>

scripts.js（包含每个表单的fetchuser，checkform，验证方法）

//start of checkuser
function fetchUser() {
  console.log('fetchuser');

  //fetch values from edit blade
  var firstname = document.getElementById("editFormFirstName").value;
  var lastname = document.getElementById("editFormLastName").value;
  var password = document.getElementById("editFormPassword").value;
  //Check input Fields Should not be blanks.
  if (firstname == '' || lastname == '' || password == '') {
    alert("Fill All Fields");
  } else {
    //Notifying error fields
    var firstname = document.getElementById("divfirstnameEditForm");
    var lastname = document.getElementById("divlastnameEditForm");
    var password = document.getElementById("divpasswordEditForm");
    //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
    if (firstname.innerHTML == 'Firstname must be 2+ letters' || lastname.innerHTML == 'Lastname name must be 2+ letters' || password.innerHTML == 'Must be a combination of special character, number and letters') {
      alert("Fill Valid Information");
    } else {
      //Submit Form When All values are valid.
      document.getElementById("myEditForm").submit();
    }
  }

}

//end of checkuser

//checkform validation
function checkForm() {
  console.log('checkform');
  // Fetching values from all input fields and storing them in variables.
  var firstname = document.getElementById("firstname1").value;
  var lastname = document.getElementById("lastname1").value;
  var password = document.getElementById("password1").value;
  //Check input Fields Should not be blanks.
  if (firstname == '' || lastname == '' || password == '') {
    alert("Fill All Fields");
  } else {
    //Notifying error fields
    var firstname = document.getElementById("firstname");
    var lastname = document.getElementById("lastname");
    var password = document.getElementById("password");
    //Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
    if (firstname.innerHTML == 'Firstname must be 2+ letters' || lastname.innerHTML == 'Lastname name must be 2+ letters' || password.innerHTML == 'Must be a combination of special character, number and letters') {
      alert("Fill Valid Information");
    } else {
      //Submit Form When All values are valid.
      document.getElementById("myForm").submit();
    }
  }
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
  var xmlhttp;
  if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = "Validating..";
    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = xmlhttp.responseText;
    } else {
      document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
    }
  }
  xmlhttp.open("GET", "/php/validation.php?field=" + field + "&query=" + query, false);
  xmlhttp.send();
}
// AJAX code to check input field values when onblur event triggerd.
function validateEditForm(field, query) {
  var xmlhttp;
  if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { // for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = "Validating..";
    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById(field).innerHTML = xmlhttp.responseText;
    } else {
      document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
    }
  }
  xmlhttp.open("GET", "/php/validationEditForm.php?field=" + field + "&query=" + query, false);
  xmlhttp.send();
}

你能帮我解释为什么它会出现在我的日志中吗？

Answer 1

您可以删除最后一个布尔值：

  xmlhttp.open("Method", "URL");

或只使用true：

  xmlhttp.open("Method", "URL", true);

来自MDN的文档：

可选的布尔参数 默认为true ，指示是否异步执行操作。如果此值为false，则在收到响应之前，send()方法不会返回。如果为true，则使用事件侦听器提供已完成事务的通知。如果multipart属性为true，则必须为true，否则将抛出异常。

AJAX上不推荐使用主线程上的同步XMLHttpRequest

1 个答案: