Question

我有一个下拉菜单，选择该菜单后，将执行以下代码。在我的个人计算机上的Chrome上，这完全可以100％地起作用，但是，我发现在其他人的计算机上（使用Chrome或Firefox等），代码可能很气质。我也在自己的计算机上的Firefox上发现了问题。

基本上，该代码具有三个ajax调用，第一个是在页面上呈现徽标，第二个是呈现html表，第三个是更新chartjs画布。

Firefox上的一个特定问题是，每当我更改下拉菜单上的选择时，页面项仅每隔一秒钟呈现一次。报告的其他问题是，有时特定的下拉菜单选择不会显示任何项目，但是下拉菜单代码没有任何问题，因为它对其他用户而言非常完美。

我不是jQuery方面的专家，但是我在其他页面上将这种结构用于Ajax调用，并且完全没有问题。下面的代码中是否存在一些可能引入这些问题的核心问题？

jQuery(document).ready(function($) {
  var valueCheck;

  jQuery('#afl_team').on('change', function() {
    afl_team = $('#afl_team').val();
    jQuery.ajax({
      type: "POST",
      url: "/wp-admin/admin-ajax.php",
      data: {
        action: 'call_team_logo',
        afl_team: afl_team,
      },
      success: function(output) {
        jQuery('#team_logo').html(output);
      }
    });

    jQuery.ajax({
      type: "POST",
      url: "/wp-admin/admin-ajax.php",
      data: {
        action: 'call_ruck_team_stats',
        afl_team: afl_team,
      },
      success: function(output) {
        jQuery('#ruck_stats').html(output);
      }
    });

    jQuery.ajax({
      type: "POST",
      url: "/wp-admin/admin-ajax.php",
      dataType: "json",
      data: {
        action: 'call_ruck_contests',
        afl_team: afl_team,
      },
      success: function updateruckChart(output) {
        ruckChart.data.datasets = [];
        for (var i = 0; i < output[0].length; i++) {
          ruckChart.data.datasets.push({
            label: output[0][i],
            backgroundColor: output[2][i],
            borderColor: output[2][i],
            data: output[1][i]
          });
          ruckChart.update();
        }
      }
    });
  });
});

-----------更新-----------

基于对这篇文章的评论，我合并了这段代码的一部分，以通过较少的AJAX调用返回json，但是我仍然遇到问题。我注意到在firefox中使用开发人员工具时，Ajax调用触发没有问题，只有80％的时间返回结果，而其他20％的时间没有返回结果。

当开发人员工具未返回任何内容时，将类型表示为xml，但在其成功运行时，其表示为html。什么时候该起作用或什么时候不起作用都没有一致性。

整个页面的“我的Ajax调用Javascript”如下所示。我曾尝试删除脚本并重新运行，但仍然可以间歇性地获得成功。

供参考的临时页面为here。

<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#afl_team').on( 'change', function () {
         afl_team = $('#afl_team').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        dataType: "html",               //POSSIBLY DELETE
       data: {
            action: 'call_team_logo',
            afl_team: afl_team,
        },
         success:function(output){
            jQuery('#team_logo').html( output );
         }
     });
    });
});
</script>


<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#afl_team,#afl_opponent').on( 'change', function () {
         afl_team = $('#afl_team').val();
         afl_opponent = $('#afl_opponent').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_ruck_last_time',
            afl_team: afl_team,
            afl_opponent: afl_opponent,
        },
         success:function(output){
             jQuery('#ruck_last_time').html( output );
         }
     });
    }).change();
});
</script>

<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#afl_team').on( 'change', function () {
         afl_team = $('#afl_team').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        dataType: "json", 
        data: {
            action: 'call_ruck_team_stats_json',
            afl_team: afl_team,
        },
         success:function(output){
            var myJSON = output[0];
            var myJSON2 = output[1];
        var col = [];
        for (var i = 0; i < myJSON.length; i++) {
            for (var key in myJSON[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }
        var table = document.createElement("table");
        var tr = table.insertRow(-1);                   // TABLE ROW.
        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
        for (var i = 0; i < myJSON.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myJSON[i][col[j]];
            }
        }
        var divContainer = document.getElementById("teamSummary");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        var col = [];
        for (var i = 0; i < myJSON2.length; i++) {
            for (var key in myJSON2[i]) {
                    if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }
        var table = document.createElement("table");
        var tr = table.insertRow(-1);                   // TABLE ROW.
        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }
        for (var i = 0; i < myJSON2.length; i++) {
            tr = table.insertRow(-1);
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myJSON2[i][col[j]];
            }
        }
        var divContainer = document.getElementById("opponentSummary");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
            ruckChart.data.datasets = [];
            for (var i=0; i<output[2].length; i++) {
                ruckChart.data.datasets.push({
                  label: output[2][i],
                  backgroundColor: output[4][i],
                  borderColor: output[4][i],
                  data: output[3][i]
                });
         ruckChart.update();
            }
            }   // THIS BRACKET CLOSES SUCCESS FUNCTION
     });
    }).change();
});
</script>

jQuery Ajax呼叫问题

0 个答案: