通过.js文件获取mysql数据

时间:2018-05-15 09:55:13

标签: javascript php html

我会直言不讳。我需要知道是否可以强制.js文件读取php语法。如果是这样,你们中的任何人都能教育我这个吗?我的项目是关于从数据库中解析数据,最终将显示为图形。有了这个,我使用ff。代码:

data.js

 var ganttData = [
    {
        id: 1, name: "Site Identification", series: [
            { name: "Planned", start: new Date(2018,03,01), end: new Date(2018,03,20) },
            { name: "Actual", start: new Date(2018,03,01), end: new Date(2018,03,15), color: "#ff0000" }
        ]
    }, 
    {
        id: 2, name: "Site Evaluation", series: [
            { name: "Planned", start: new Date(2018,04,20), end: new Date(2018,05,10) },
            { name: "Actual", start: new Date(2018,04,21), end: new Date(2018,05,05), color: "#00ff00" },
            //{ name: "Projected", start: new Date(2018,00,06), end: new Date(2018,00,17), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 3, name: "Approval of MOA with Farmer...", series: [
            { name: "Planned", start: new Date(2018,05,11), end: new Date(2018,05,20) },
            { name: "Actual", start: new Date(2018,05,11), end: new Date(2018,05,21), color: "#ffff00" }
        ]
    }, 
    {
        id: 4, name: "Sourcing/Procurement of Planting Material", series: [
            { name: "Planned", start: new Date(2018,05,20), end: new Date(2018,07,18) },
            { name: "Actual", start: new Date(2018,05,20), end: new Date(2018,07,05), color: "#00ff00" }
        ]
    },
    {
        id: 5, name: "Land Preparation", series: [
            { name: "Planned", start: new Date(2018,07,18), end: new Date(2018,08,26) },
            { name: "Actual", start: new Date(2018,07,18), end: new Date(2018,08,30), color: "#ff0000" }
        ]
    }, 
    {
        id: 6, name: "Provision of Access...", series: [
            { name: "Planned", start: new Date(2018,08,26), end: new Date(2018,09,15) },
            { name: "Actual", start: new Date(2018,08,26), end: new Date(2018,09,15), color: "#00ff00" },
            //{ name: "Projected", start: new Date(2018,00,06), end: new Date(2018,00,20), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 7, name: "Area Isolation...", series: [
            { name: "Planned", start: new Date(2018,09,15), end: new Date(2018,10,05) },
            { name: "Actual", start: new Date(2018,09,16), end: new Date(2018,10,04), color: "#00ff00" },
        ]
    }, 
    {
        id: 8, name: "Delivery of Seedlings", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,19) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,20), color: "#ff0000" }
        ]
    }, 
    {
        id: 9, name: "Inspection & Acceptance", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,06) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,06), color: "#00ff00" }
        ]
    }, 
    {
        id: 10, name: "Nursery Establishment", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,20) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,20), color: "#00ff00" }
        ]
    }, 
    {
        id: 8, name: "Transplanting of Seedlings", series: [
            { name: "Planned", start: new Date(2018,10,21), end: new Date(2018,10,26) },
            { name: "Actual", start: new Date(2018,10,21), end: new Date(2018,10,30), color: "#ff0000" }
        ]
    }, 
    {
        id: 8, name: "Application of Fertilizers", series: [
            { name: "Planned", start: new Date(2018,11,01), end: new Date(2018,11,06) },
            { name: "Actual", start: new Date(2018,11,01), end: new Date(2018,11,07), color: "#0000ff" }
        ]
    }
];

的index.html

<script type="text/javascript" src="data.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#ganttChart").ganttView({ 
                    data: ganttData,
                    slideWidth: 900,
                    behavior: {
                        onClick: function (data) { 
                            var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        },
                        onResize: function (data) { 
                            var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        },
                        onDrag: function (data) { 
                            var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        }
                    }
                });

                // $("#ganttChart").ganttView("setSlideWidth", 600);
            });
        </script>

使用data.js我能够强制显示数据,因为它是硬编码的。但我需要的是使用mysql_fetch_array,因为我需要解析来自database的数据而不是硬编码的数据。

请帮我这个?以下是我的数据库结构:
DB1

2 个答案:

答案 0 :(得分:0)

向PHP脚本发出AJAX请求。

让PHP进行数据库调用。

json_encode结果数组。

header('Content-Type: application/json');

然后回显$json并退出。

答案 1 :(得分:-1)

进行Ajax调用,

js here

或关注php-mysql-ajax-jquery

php ajax