同步 XMLHttRequest 错误答案

【问题标题】：Synchronous XMLHttRequest error同步 XMLHttRequest 错误
【发布时间】：2018-03-02 13:04:05
【问题描述】：

以下是我的脚本。我正在使用 codeigniter，一个 php 框架以及 jquery 和 ajax。任务是通过 ajax 将员工详细信息添加到数据库中，但我收到此错误：

主线程上的同步 XMLHttpRequest 已被弃用，因为其对最终用户体验的不利影响。如需更多帮助 http://xhr.spec.whatwg.org/

    <script>
    $(function(){

        $('#btnAdd').click(function(){
        $('#myModal').modal('show');
        $('#myModal').find('.modal-title').text('Add New Employee');
        $('#empForm').attr('action','<?php echo base_url() ?>addEmployee')
    });


    $('#btnSave').click(function(){
        var url = $('#empForm').attr('action');
        var data = $('#empForm').serialize();


    //Validations
       var empName = $('input[name="emp_name"]');
       var empAdd = $('input[name="emp_address"]');
       var result ='';
       if(empName.val()==''){
           empName.parent().parent().addClass('has-error');
       }
       else{
           empName.parent().parent().removeClass('has-error');
           result +='1';
       }

       if(empAdd.val()==''){
           empAdd.parent().parent().addClass('has-error');
       }
       else{
           empAdd.parent().parent().removeClass('has-error');
           result +='2';
       }
      if(result=='12'){
          $.ajax({
          type : 'ajax',
          method : 'post',
          url :url,
          data : data,
          async : false,
          dataType : 'json',
          success: function(success){
              if(response.success){
                   $('#myModal').modal('hide');
                   $('#empForm')[0].reset();
                   index();
              }
              else{
                  alert('error');
              }
        },
        error: function(){
               alert('Could Not Add Data');
        }
     });
  }
});

【问题讨论】：

如果 btnSave 是提交按钮，则需要将脚本更改为 $("#empForm").on("submit",function(e) { e.preventDefault(); var url = $(this).attr('action');.... 并 REMOVE async : false,
在您的 ajax 请求中使用 async : false 属性，您正在使您的请求同步。这意味着整个应用程序将冻结，直到数据集进入您的最后。删除该属性或将其设置为 true。（默认为真）
我什至不明白为什么jQuery首先允许设置async:false。世界上的每个新秀都将其设置为 false，因为他们可以。
$.ajaxPrefilter(function(options, original_Options, jqXHR) { options.async = true; });这段代码能解决我的问题吗？
我已经添加了这段代码并删除了 async:false 现在的问题是记录被存储在数据库中，但起初当我点击保存按钮时它显示“无法添加数据”。但是，刷新页面后，它确实被添加到数据库中。你能告诉我问题出在哪里吗？

标签： javascript jquery ajax codeigniter xmlhttprequest

【解决方案1】：

您收到此错误是因为您的 Ajax 请求是同步的 (asyc: false)。

该错误甚至为您提供了一个链接，您可以在其中阅读更多信息。

Throws an InvalidAccessError exception if async is false

参考：https://xhr.spec.whatwg.org/#the-open()-method

要解决您的问题，您应该将 async 设置为 true 或根本不指定它。

【讨论】：

已经在 cmets 中。让我们删除问题，因为这个问题是由无法再重现的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。这通常可以通过在发布之前确定并仔细检查重现问题所需的最短程序来避免。

【解决方案2】：

解决方法 (async:true) 将显示加载图像并成功隐藏加载图像。

不推荐使用 async:false ，因为它会停止所有的 js 操作，并等待来自服务器的响应。

【讨论】：

【解决方案3】：

类型：'ajax'，

type 应该是 GET 或 POST，并且仅当您的 jquery 版本为时才应使用

异步：假，

您不需要更改“异步”行为，因为毕竟 Ajax 中的第一个字母代表“异步”

【讨论】：

感谢您的回复。但是，我已经设置了“方法：发布”。