javascript - 为什么我的 Highcharts 没有加载到后续的 jquery-ajax 调用中？

Question

这里是我如何通过 jquery ajax 传递 PHP 数组数据，在调用的 php 脚本上的过程之后，它第一次成功加载，但进一步的请求没有显示任何更新的数据。

我有两个问题

1: 如果我直接加载页面 (mydomain.com/new.php) 来检查图表功能(这里我手动设置 $myArray 的 $_POST 值)，加载是快又快，但是当通过ajax调用时会花费很多时间。？ 这个问题是为了知道这些东西究竟是如何工作的

2: 第一次成功加载虽然花费了自己的时间，但是当我再次单击按钮调用图表时，剩余的文本被成功加载但不是图表？

我的页面.php

<?php
        $aCoders = array();  
        $aCoders['Ed']['age'] = 25;  
        $aCoders['Ed']['languages'] = array('PHP', 'MySQL', 'JavaScript', 'Objective-C', 'HTML', 'CSS');  
        $aCoders['Sarah']['age'] = 25;  
        $aCoders['Sarah']['languages'] = array('HTML', 'CSS');  
    ?>

/* HTML PART */
<button type="button" class="btn btn-warning btn-sm pull-right" id="new" >

             Call The Graph </button> 
              <hr />

              <div id="whereToPrint"></div> // Here the graph Loads
      <br />
      <hr />



<script>
$(document).ready(function (){
/* Check Starts*/
        var activities = <?php echo json_encode($aCoders); ?>;
        $('#new').click(function (e){
           $("#flash").show();
            $("#flash").fadeIn(400);
             $.ajax({
                    type: "POST",
                    url: "new.php",
                    data: { activitiesArray : activities },
                    cache: false,
                    async: false,
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('error');
                    },
                    success: function (data) {
                        //alert("new3");

                        $('#whereToPrint').fadeIn(2000).html(data);
                        $("#flash").hide();
                        }

                });

             });


        });
</script>

new.php

<?php 
$myArray = $_POST['activitiesArray'];

//其他脚本和数据库调用

?>
<script src="js/jquery.js" ></script>
<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            // Here the script for the bar chart stacked goes using the $myArray values
            // Its working all fine
            });
    });


        </script> 
<h2>Here is your chart</h2>        
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="highstock-js/highstock.js"></script> 
<script src="highstock-js/exporting.js"></script> 
<script src="highstock-js/highcharts-more.js"></script>

输出

Answer 1

一旦我删除了所有不存在的代码片段(比如 javascript 文件 highstock-js/highstock.js )和对 $('#container').highcharts({}) 的调用 - 您提供的代码中未定义，每次我单击按钮时，脚本都会运行并重新加载。

但是，您提供的代码不足以找出问题所在。

但是为了调试您的代码并找到错误 - 我强烈建议使用安装了 Firebug 扩展的 Firefox 或打开开发者工具的 Chrome(菜单 -> 工具 -> 开发者工具) - 检查你的网络选项卡 - 你会看到那里有加载的文件 - 他们为此花费的时间 - 并检查控制台是否有 Javascript 错误。从那里开始应该相当容易。