Question

我有一个选择＆amp; amp;更新SQL表。

JS：

<script>  
$(document).ready(function(){  
  function fetch_data()  
  {  
       $.ajax({  
            url:"select.php",  
            method:"POST",  
            cache:"false",
            success:function(data){  
                 $('#live_data').html(data);  
            }  
       });  
  }  
  fetch_data();  

  function edit_data(id, text, column_name)  
  {  
       $.ajax({  
            url:"edit.php",  
            method:"POST",  
            cache:"false",
            data:{id:id, text:text, column_name:column_name},  
            dataType:"text",  
            success:function(data){  
                 $('#updatesucess').html(data);  
                  $('#updatesucess').delay(2000).fadeOut(300);
            }  
       });  
  }  
  $(document).on('blur', '.OilProd', function(){  
       var id = $(this).data("id2");  
       var OilProd = $(this).text();  
       edit_data(id, OilProd, "OilProd");  
    });  
  });  
 </script>

形式：

<html>  
  <head>  
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>Live Table Data Edit</title>  
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

  </head>  
  <body>  
       <div class="container">  
            <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>Kodiak Daily Production
                    </strong>
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">


            <div class="table-responsive">  
                 <div id="updatesucess"></div>
                 <p></p>
                 <div id="live_data"></div>                 
            </div>  
       </div> <!-- close panel body --> 
       </div> <!-- panel panel-default -->
       </div> <!-- close col-lg-12 -->
       </div> <!-- close row --> 
       </div> <!-- Close Container --> 
  </body>  
</html>

以下代码显示了Firefox和Chrome上php的内容，但不显示IE8 / 9中的内容。

我试过以下

设置缓存：＆＃34; false＆＃34;， async：false， 改变从发布到但没有去。

我还需要做些什么才能在Internet Explorer 8-11中使用它？

更新

在HTML中添加了以下标记，现在至少可以显示数据，但无法对表单进行任何编辑。

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 1

出于某种原因，Internet Explorer有时会拥有与缓存相关的生活。如果在Internet Explorer控制台中检查网络选项卡，则会看到ajax请求的304状态（未修改）。我有时会遇到这种情况，似乎请求被Internet Explorer阻止，并且从未到达服务器。

您可以尝试通过向ajax函数添加带随机数的get参数来解决问题。

$.ajax({  
        url:"select.php?breakcache=" + Math.random(),  
        method:"POST",  
        cache:"false",
        success:function(data){  
             $('#live_data').html(data);  
        }  
});

Answer 2

尽管运行IE11并指定X-UA-Compatible，您仍应检查IE正在使用的渲染模式。特别是，检查它是否使用Quirks模式，因为这肯定会杀死Ajax（以及许多其他功能）。

我怀疑这可能是问题，因为您的HTML代码不包含DOCTYPE，并且缺少doctype会自动使IE跳转到怪癖模式。

通过将HTML5文档类型添加到HTML文件的顶部（紧邻<html>标记上方）来解决此问题：

<!DOCTYPE html>

这应该可以解决问题。

JQuery AJAX不会在Internet Explorer上显示

2 个答案: