javascript - IE 11 根本不显示任何内容

标签 javascript jquery ajax internet-explorer-11

以下代码适用于除 EI11 以外的所有浏览器。控制台或任何地方都没有显示错误。在过去的两天里,我一直在 Stack Overflow 上尝试所有其他已回答的问题,包括缓存破坏、添加 header 选项等任何问题。在这里迷路了,任何指导将不胜感激,我将添加所需的任何其他信息。

HTML

<!DOCTYPE html>
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API CAll</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>
<style>
* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
</style>
</head>

<body>

   <div id="content" class="row"></div>
 </body>
 </html>

JS

 $( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            let column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                let para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(`${objVal[k].toFixed(3)} ${k} `);

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 }); 

最佳答案

IE11 不支持 ES6。这意味着,您需要更换:

  • 使用旧 ES5 语法的模板文字 'string' + 'string'
  • let/const with var(正如@lostero 提到的,IE11 支持 let/const,but not fully),因此最好避免使用它们。

或使用 ES6+ > ES5 转译器,如 Babel

无论如何,这是 IE 的代码:

$( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            var column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                var para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(objVal[k].toFixed(3) + k );

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 });
* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="content" class="row"></div>

Live code

关于javascript - IE 11 根本不显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57778150/

相关文章:

javascript - 如果单击下一个按钮,如何验证我的表单

jQuery 在 IE 中缓存 AJAX 请求,即使缓存 : "false" is set

javascript - LABjs : How to append the scripts to the end of the body tag

javascript - Adobe AIR,内存泄漏

javascript - 如何在加载时显示隐藏表单

javascript - 向下滚动时替换div中的图像

javascript - 如何用jQuery获取url的最后两个字符?

jquery validate需要点击submit两次才能提交表单

javascript - 如何使用 jQuery AJAX 和 JSON 确认通过 Bootbox 提交的表单

javascript - 发布请求时未经授权的 401 Windows 身份验证 + Core 2.2 WebAPI