如何在jQuery / JavaScript引导程序中插入PHP变量?

时间:2015-03-04 14:02:17

标签: javascript php jquery twitter-bootstrap

所以这是我第一次使用bootstrap尝试使用" chart_filled_blue"在bootstrap但我有问题,包括我的PHP结果在jquery内的bootstrap我会感谢你的任何帮助或建议。

我的基本pdo选择抓取视图/日期

$sth = $db->prepare("SELECT date, views FROM views_by_date");
    $sth->execute();

    $result = $sth->fetchAll();
    print_r($result);

我将限制选择,因此它只会抓取最后6行或7行

所以现在我的chart_filled_blue.js就是这个

"use strict";

$(document).ready(function(){

    // Sample Data
    var d1 = [[1262304000000, 0], [1264982400000, 500], [1267401600000, 700], [1270080000000, 1300], [1272672000000, 2600], [1275350400000, 1300], [1277942400000, 1700], [1280620800000, 1300], [1283299200000, 1500], [1285891200000, 2000], [1288569600000, 1500], [1291161600000, 1200]];

    var data1 = [
        { label: "Total clicks", data: d1, color: App.getLayoutColorCode('blue') }
    ];

    $.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
        xaxis: {
            min: (new Date(2009, 12, 1)).getTime(),
            max: (new Date(2010, 11, 2)).getTime(),
            mode: "time",
            tickSize: [1, "month"],
            monthNames: ["Jan", "FebBBBB", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tickLength: 0
        },
        series: {
            lines: {
                fill: true,
                lineWidth: 1.5
            },
            points: {
                show: true,
                radius: 2.5,
                lineWidth: 1.1
            },
            grow: { active: true, growings:[ { stepMode: "maximum" } ] }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        tooltip: true,
        tooltipOpts: {
            content: '%s: %y'
        }
    }));


});

我想将所有var d1替换为db中的视图,然后将monthNames替换为db中的日期

这样做最好的方法是什么?

3 个答案:

答案 0 :(得分:2)

您可以将{1}替换为<?php echo $result['view'];?>

答案 1 :(得分:1)

您可以在构建时插入变量,例如您将JS脚本转换为.php文件并具有:

...
var d1 = <?php echo json_encode($results_from_db); ?>;
...

或者您使用AJAX调用从服务器获取结果。

var d1;
$.get('fetchdata.php", {}, function(data) { d1 = data; });

如果您提取的d1数据在页面生命周期内永远不会更改,请在页面构建时插入。它可以节省您必须将另一个http请求发送回服务器以获取数据。

如果数据确实定期更改,那么您可以组合这些方法。使用仅限PHP的方法插入&#34;初稿&#34;的数据,然后使用ajax获取更新。

答案 2 :(得分:1)

在php页面的开头填充数据库结果

$sth = $db->prepare("SELECT date, views FROM views_by_date");
    $sth->execute();

    $result = $sth->fetchAll();
    $result = json_encode($result);

在javascript中

 var d1 = JSON.parse(<?php echo $result; ?>);