jQuery getJSON 无法在 Internet Explorer 11 上运行

jQuery getJSON not working on Internet Explorer 11

我有一个站点在 Codeigniter 框架内使用 jQuery。它在 Firefox 和 Chrome 中都能完美运行。但是在 IE 中,getJSON 不起作用,jQuery load() 起作用但 getJSON 不起作用。我尝试了 $.ajaxSetup{{cache:false}} 等等,但没有任何乐趣。

var url="../../index.php/cslcontrol/";

$(document).ready(function(){

  //hide divs with the class '.views' except the one with id of 'home'
  $(".views:not('#home')").hide();
  //function that ensures only the div related to the selected menubar icon is dislayed
  $("li a[href]").click(function(){
    //storing the value of the clicked list a href
    var tabVal=$(this).attr('value');
    //showing a div whose div name is the same as the value of the selected list ahref
    $("#"+tabVal).show();
    //keeping the other divs hidden
    $(".views[id!="+tabVal+"]").hide();
  });

  $("#home_text").load("css/history.html #home_txt");

  $("#eighties_text").load("images/Eighties_seasons.html h1, p");
  
  $("#nineties_text").load("images/Nineties_seasons.html h1, p");

//making a ajax call to fill the champions table
  $.getJSON(url+"titleWin", function(data){
   $.each(data, function(){
    $("#senior_champions").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Runner up"] + "</td><td>"+ this["Play off"] + "</td></tr>");
    });
  });
  //making a ajax call to fill the senior cup table
  $.getJSON(url+"senCup", function(data){
   $.each(data, function(){
    $("#senior_cup_finals").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Score"] + "</td><td>"+ this["Runner-up"] + "</td></tr>");
    });
  });
  $.getJSON(url+"getClub", function(data){
   $.each(data, function(){
    $("#club_info").append("<a class=\"name\" role=\"button\" data-toggle=\"modal\" data-target=\"#modalCSL\">"+this["Club"]+"</a>");
    });
   var crests = [];
   $.each(data, function(){
    if(this["Image"]!=""){
      crests.push("<img src=\"images/"+this["Image"]+"\" alt=\""+this["Image"]+"\" title=\""+this["Club"]+"\"/>");
    }
   });
   $("#pix1").html(crests.slice(0, 5));
   $("#pix2").html(crests.slice(5, 10));
   $("#pix3").html(crests.slice(10, 15));
  });
});

$(document).ajaxSuccess(function(event,xhr,settings){
  //if(settings.url=="history.txt"){
    // $("#home_text").append("<div class=\"home-images\">do</div>");
  //}

  if(settings.url==url+"senCup"){
    $("#senior_cup_finals td:eq(26), #senior_cup_finals td:eq(30)").append("<a href=\"#calry_merv\"><sup> R</sup></a>");
    $("#senior_cup_finals td:eq(34)").append("<a href=\"#salt_calry\"><sup> R-p</sup></a>");
  }
  if(settings.url==url+"titleWin"){
    $("#champions td:eq(11)").append("<a href=\"#merv_salt\"><sup> R</sup></a>");
    $("#champions td:eq(52)").append("<a href=\"#straide\"><sup> Gr</sup></a>");
    $("#champions td:eq(56)").append("<a href=\"#prem\"><sup> Pr</sup></a>");
  }
  if(settings.url==url+"getClub"){
      $(".name").click(function(){
        var aref= $(this).text();
        $(".modal-body").load("css/history.html h1:contains('"+aref+"'), h1:contains('"+aref+"')+p");
        $(".modal-footer").html("<button id=\"butt\" name=\""+aref+"\" value=\""+aref+"\">"+aref+" honours</button><div id=\"dead\"></div>");
      });
      $("#club_info .name:last-of-type").css({"margin-right":"50%"});
  }
  
  if(settings.url=="css/history.html"){
     $("#butt").click(function(){
      var testing=$(this).attr('value');
      var testclean=encodeURIComponent(testing);
 
      $.getJSON(url+"getHonours?name="+testclean, function(data){
        var honours=[];
      
        $.each(data, function(){ 
            
          honours.push("<table class=\"table\" id=\"honstab\"><tr><th>"+data[0]["Source"]+"</th><th>"+data[1]["Source"]+"</th><th>"+data[2]["Source"]+"</th><th>"+data[3]["Source"]+"</th><th>"+data[4]["Source"]+"</th><th>"+data[5]["Source"]+"</th><th>"+data[6]["Source"]+"</th><th>"+data[7]["Source"]+"</th><th>"+data[8]["Source"]+"</th></tr><tr><td>"+data[0]["COUNT(*)"]+"</td><td>"+data[1]["COUNT(*)"]+"</td><td>"+data[2]["COUNT(*)"]+"</td><td>"+data[3]["COUNT(*)"]+"</td><td>"+data[4]["COUNT(*)"]+"</td><td>"+data[5]["COUNT(*)"]+"</td><td>"+data[6]["COUNT(*)"]+"</td><td>"+data[7]["COUNT(*)"]+"</td><td>"+data[8]["COUNT(*)"]+"</td></tr></table>");
        
          $("#dead").html(honours.slice(0,1));
          $("#honstab td").each(function(){
            if ($(this).html()=="0"){
              trial=$(this).index();
              $("#honstab th:eq("+trial+"), #honstab td:eq("+trial+")").remove();
              if($("#honstab tr").html()==0){
                $("#honstab").html("<tr><th>No Honours</th></tr></table>");
              }
            }
          });
        });
      });
     });
  }

});

<!--Heres the view file-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
        <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
        <title>Connacht Senior League</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
        <link href="css/main-style.css" rel="stylesheet" type='text/css'>
      
    </head>
    <body>
        <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <div class="heading">
                    <h1>Connacht Senior League</h1>
                    
                  </div>
                
                  <nav class="navbar navbar-default" id="csl-navbar" role="navigation">
                      <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <!--creates the toggle button that displays the menu in small screen formats-->
                          <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span> 
                        </button>
                            <a class="navbar-brand" href="#"></a>
                      </div>
                      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                         <ul class="nav navbar-nav" id="accordion" role="tablist" aria-multiselectable="false">
                            <li><a href="#home" value="home">Home</a></li>
                            <li class="dropdown">
                              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">History<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#eighties" value="eighties">Eighties Seasons</a></li>
            <li><a href="#nineties" value="nineties">Nineties Seasons</a></li>
          </ul>
        </li>
                            <li><a href="#clubs" value="clubs">Clubs</a></li>
                            <li><a href="#champions" value="champions">Champions</a></li>
                            <li><a href="#senior_cup" value="senior_cup">Senior-Cup</a></li>
                         </ul>
    <!-- for the search and go form on the right of navbar-->
                            <form class="navbar-form navbar-right" role="search">
                              <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                              </div>
                              <button type="submit" class="btn btn-default">Go</button>
                            </form>
                     </div>
                  </nav>
           
                  <div id="home" class="views">
                    <div class="row">
                     <div class="col-xs-12" id="home_text">
                     </div>
                     <div class="col-xs-12" id="home_image">
                      <img src="images/home_page.png"/>
                     </div>
                     <div class="col-xs-12" id="ina_logo">
                      <img src="images/ina.PNG" width="30%"/>
                     </div>
                     </div>   
                  </div>
                  
                  <div id="eighties" class="views">
                     <div class="row">
                     <div class="col-xs-12" id="eighties_text">
                     </div>
                     </div>   
                  </div>
                  <div id="nineties" class="views">
                     <div class="row">
                     <div class="col-xs-12" id="nineties_text">
                     </div>
                     </div>   
                  </div>

                  <div id="clubs" class="views">
                     <div class="row">
                     <div class="col-xs-12">
                      <div id="club_info">

                      <div class="modal fade bs-example-modal-lg" id="modalCSL" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                          <div class="modal-content">
                            <div class="modal-body">
                            ...

                          </div>
                         <div class="modal-footer">

                          </div>
                        </div>
                        </div>
                      </div>
                    </div>

                    </div>
                  </div>
                  </div>

                  <div id="champions" class="views">
                    <div class="row">
                      <div class="col-xs-12">
                        <h1>Champions</h1>
                        <p>The following table lists the League Champions and sides who finished Second. Goal differnece did not count so occassionally Play-offs were needed. An exception is the case of the 94-95 season where the League was split into two groups so a Play-off was mandatory. In 96-97 the season had Two divisions, the table only shows details of the Premier Division with First Division details in the footnotes</p>   
                      <table class="table table-striped" id="senior_champions">
                        <tr>
                         <th>Season</th>
                         <th>Winner</th>
                         <th>Runner-up</th>
                         <th>Play off</th>
                       </tr>
                      </table>
                      <div class="notes"><p><a name="merv_salt" id="merv_salt"></a>R: 2nd Replay after two 2-2 draws</p>
                        <p><a name="straide" id="straide"></a>Gr: League split into 2 groups with group winners meeting in a play-off final. Top 3 teams in each group would go into a Premiership and the rest into a first division</p>
                        <p><a name="prem" id="prem"></a>Pr: This season had a Premiership and a First Division. Ballinasloe Town were First Division Champs.</p>
                     </div>
                   </div>
                   </div>
                  </div>
                  
                  <div id="senior_cup" class="views">
                    <div class="row">
                      <div class="col-xs-12">
                         <h1>Senior Cup</h1>
                        <p>The following table lists details of the Senior Cup Finals. This was the main knockout competition involving the Connacht Senior clubs. However champions from the four junior leagues were also included and they are highlighted with a (J)</p>
                    <table class="table table-striped" id="senior_cup_finals">
                      <tr>
                       <th>Season</th>
                       <th>Winner</th>
                       <th>Score</th>
                       <th>Runner-up</th>
                     </tr>
                    </table>
                    <div class="notes"><p><a name="calry_merv" id="calry_merv"></a>R: Replay after 1-1 draw</p>
                                          <p><a name="salt_calry" id="salt_calry"></a>R-p: Replay won on penalties after 1-1 draw</p>
                                        </div>
                  </div>
                </div>
               </div>
            </div>
        </div>

       <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" pause="onload">
         <!--  Wrapper for slides--> 
          <div class="carousel-inner" role="listbox">
            <div class="item active" id="pix1">
        
            </div>
            <div class="item" id="pix2">

            </div>
            <div class="item" id="pix3">

            </div>
            
          </div>

        </div>
</div>

       
<!--[if lt IE 9]>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<!--<![endif]-->
        <script src="js/bootstrap.js"></script>
<script src="js/csl.js" type="text/javascript">
 </script>

    </body>
</html>

那时候好像是IE浏览器的js文件有问题。它不喜欢我在所有函数之外都有全局 'url' 变量这一事实。所以我不得不在 (document).ready(function{}) 中命名这个变量。此外,我还让 ajaxSuccess 和 ajaxError 函数自行运行,它们也需要带入 (document).ready 函数中,仅在其中单独命名 url 变量是行不通的。基本上一切都需要包含在一个主要功能中。这个 link 这里启发了解决方案 http://patrickgibson.com/news/andsuch/000202.php

$(document).ready(function(){
var url="../../index.php/cslcontrol/";
//$.ajaxSetup({ global: true });
  //hide divs with the class '.views' except the one with id of 'home'
  $(".views:not('#home')").hide();
  //function that ensures only the div related to the selected menubar icon is dislayed
  $("li a[href]").click(function(){
    //storing the value of the clicked list a href
    var tabVal=$(this).attr('value');
    //showing a div whose div name is the same as the value of the selected list ahref
    $("#"+tabVal).show();
    //keeping the other divs hidden
    $(".views[id!="+tabVal+"]").hide();
  });

  $("#home_text").load("css/history.html #home_txt");

  $("#eighties_text").load("images/Eighties_seasons.html h1, p");
  
  $("#nineties_text").load("images/Nineties_seasons.html h1, p");

//making a ajax call to fill the champions table
  $.getJSON(url+"titleWin", function(data){
   $.each(data, function(){
    $("#senior_champions").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Runner up"] + "</td><td>"+ this["Play off"] + "</td></tr>");
    });
  });
  //making a ajax call to fill the senior cup table

  $.getJSON(url+"senCup", function(data){
   $.each(data, function(){
    $("#senior_cup_finals").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Score"] + "</td><td>"+ this["Runner-up"] + "</td></tr>");
    });
  });
  $.getJSON(url+"getClub", function(data){
   $.each(data, function(){
    $("#club_info").append("<a class=\"name\" role=\"button\" data-toggle=\"modal\" data-target=\"#modalCSL\">"+this["Club"]+"</a>");
    });
   var crests = [];
   $.each(data, function(){
    if(this["Image"]!=""){
      crests.push("<img src=\"images/"+this["Image"]+"\" alt=\""+this["Image"]+"\" title=\""+this["Club"]+"\"/>");
    }
   });
   $("#pix1").html(crests.slice(0, 5));
   $("#pix2").html(crests.slice(5, 10));
   $("#pix3").html(crests.slice(10, 15));
  });
$(document).ajaxSuccess(function(event,xhr,settings){
//var json="http://davestest.webuda.com/index.php/cslcontrol/";
  //if(settings.url=="history.txt"){
    // $("#home_text").append("<div class=\"home-images\">do</div>");
  //}

  if(settings.url==url+"senCup"){
    $("#senior_cup_finals td:eq(26), #senior_cup_finals td:eq(30)").append("<a href=\"#calry_merv\"><sup> R</sup></a>");
    $("#senior_cup_finals td:eq(34)").append("<a href=\"#salt_calry\"><sup> R-p</sup></a>");
  }
  if(settings.url==url+"titleWin"){
    $("#champions td:eq(11)").append("<a href=\"#merv_salt\"><sup> R</sup></a>");
    $("#champions td:eq(52)").append("<a href=\"#straide\"><sup> Gr</sup></a>");
    $("#champions td:eq(56)").append("<a href=\"#prem\"><sup> Pr</sup></a>");
  }
  if(settings.url==url+"getClub"){
      $(".name").click(function(){
        var aref= $(this).text();
        $(".modal-body").load("css/history.html h1:contains('"+aref+"'), h1:contains('"+aref+"')+p");
        $(".modal-footer").html("<button id=\"butt\" name=\""+aref+"\" value=\""+aref+"\">"+aref+" honours</button><div id=\"dead\"></div>");
      });
      $("#club_info .name:last-of-type").css({"margin-right":"50%"});
  }
  
  if(settings.url=="css/history.html"){
     $("#butt").click(function(){
      var testing=$(this).attr('value');
      var testclean=encodeURIComponent(testing);
 
      $.getJSON(url+"getHonours?name="+testclean, function(data){
        var honours=[];
      
        $.each(data, function(){ 
            
          honours.push("<table class=\"table\" id=\"honstab\"><tr><th>"+data[0]["Source"]+"</th><th>"+data[1]["Source"]+"</th><th>"+data[2]["Source"]+"</th><th>"+data[3]["Source"]+"</th><th>"+data[4]["Source"]+"</th><th>"+data[5]["Source"]+"</th><th>"+data[6]["Source"]+"</th><th>"+data[7]["Source"]+"</th><th>"+data[8]["Source"]+"</th></tr><tr><td>"+data[0]["COUNT(*)"]+"</td><td>"+data[1]["COUNT(*)"]+"</td><td>"+data[2]["COUNT(*)"]+"</td><td>"+data[3]["COUNT(*)"]+"</td><td>"+data[4]["COUNT(*)"]+"</td><td>"+data[5]["COUNT(*)"]+"</td><td>"+data[6]["COUNT(*)"]+"</td><td>"+data[7]["COUNT(*)"]+"</td><td>"+data[8]["COUNT(*)"]+"</td></tr></table>");
        
          $("#dead").html(honours.slice(0,1));
          $("#honstab td").each(function(){
            if ($(this).html()=="0"){
              trial=$(this).index();
              $("#honstab th:eq("+trial+"), #honstab td:eq("+trial+")").remove();
              if($("#honstab tr").html()==0){
                $("#honstab").html("<tr><th>No Honours</th></tr></table>");
              }
            }
          });
        });
      });
     });
  }

});
$(document).ajaxError(function(event, jqxhr, settings){
  if(settings.url==url+"senCup"){
    alert("not loading");
  }
});
});



 

尝试在视图模型 js 中使用 Knockout 绑定和方法 ko.toJS。