laravel 5 - 将 php 变量传递给 jquery 或 ajax 或 javascript答案

【问题标题】：laravel 5 - pass php varaible to jquery or ajax or javascriptlaravel 5 - 将 php 变量传递给 jquery 或 ajax 或 javascript
【发布时间】：2016-11-01 06:57:07
【问题描述】：

我在网站上搜索了很多，但我找不到答案，所以我发布了我的问题。我认为我的问题很简单，但这是我第一次使用 javascript、jquery 和 ajax，我不知道该怎么做:(！我使用 Laravel 5 我有一个刀片 php 页面，在这个文件中我有一段时间可以创建许多像这样的 chart.blade.php：

<?php $id=0; ?>
@foreach($results as $row)
...

<?php 
 $i++; 
 $allGrade = findData($row);
 echo "<div id=\"container$id\" style=\"...\"></div>";
?>
...
@endforeach

这个文件创建了我所有的 div，id 为 container1, container2, container3, ... 在某些情况下创建 100 个 div，在某些情况下创建 1200 个 div 并且它不是恒定的！

在这些 div 中，我想使用条形图，我使用 http://highcharts.com/。我的一个问题是做这项工作的最佳方式是什么？在这个刀片的顶部，我将这个 java 脚本函数用于 highchart.js

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
    $ {
        demo.css
    }
</style>
<script type="text/javascript">
    $(function () {
        for (var i = 0; i < 5000; i++) {
          // Some Alert ****test here ****
            //I put some alert work correctly




            $('#container' + i).highcharts({
                chart: {
                    type: 'bar'
                }
                , title: {
                    text: 'Historic World Population by Region'
                }
                , subtitle: {
                    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
                }
                , xAxis: {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
                    , title: {
                        text: null
                    }
                }
                , yAxis: {
                    min: 0
                    , title: {
                        text: 'Population (millions)'
                        , align: 'high'
                    }
                    , labels: {
                        overflow: 'justify'
                    }
                }
                , tooltip: {
                    valueSuffix: ' millions'
                }
                , plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                }
                , legend: {
                    layout: 'vertical'
                    , align: 'right'
                    , verticalAlign: 'top'
                    , x: -40
                    , y: 80
                    , floating: true
                    , borderWidth: 1
                    , backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF')
                    , shadow: true
                }
                , credits: {
                    enabled: false
                }
                , series: [{
                    name: 'Year 1800'
                    , data: [107, 31, 635, 203, 2]
    }, {
                    name: 'Year 1900'
                    , data: [133, 156, 947, 408, 6]
    }, {
                    name: 'Year 2012'
                    , data: [JSON.parse('<?php echo json_encode($allGrades[1]); ?>')]
    }]
            });
        }
    });
</script>
</head>

<body>
<div id="container4" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
<div id="container2"></div>
<div id="container3"></div>
<div id="container1"></div> 
. 
.
.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</body>

</html>

allGrade[1] 的值为 20 ，当我在 Alert test 部分使用此警报测试时，如下所示

   var d = <?php echo json_encode($allGrades); ?>; //Don't forget the extra semicolon!
        //alert(d[1]);

  j++;
  var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
  var c1 = newJ[1];
  var c2 =newJ[2];
  alert(c1);
  alert(JSON.parse('<?php echo json_encode($allGrades[1]); ?>'));

警报工作并在警报框中显示数据 20！

当我放 c1 或放 JSON.parse('') 时，我期望 Data Year 2012 图表数据为 20 ，但是当我放这两个项目时不起作用！

【问题讨论】：

更改data: [JSON.parse('<?php echo json_encode($allGrades['+i+']); ?>')]

标签： javascript php jquery highcharts laravel-5

【解决方案1】：

改变数据属性看起来像

  var newJ = JSON.parse('<?php echo json_encode($allGrades); ?>');
then 

data: newJ[i]

【讨论】：

[JSON.parse('')] ：未定义索引：+i+
var newJ = JSON.parse('');然后 data: newJ[i] 这对我不起作用。当我使用这个其他图表时被隐藏！我使用检查并显示：Web 控制台日志记录 API（console.log、console.info、console.warn、console.error）已被此页面上的脚本禁用。
奇怪为什么不用javascript获取json文件？
不知道怎么办？？我没有json文件！此数据自动创建，可能会更改！