简体   繁体   English

jQuery和SQL的结合

[英]Combination of Jquery and SQL

I am looking to build a website which has a page, upon which there are some jChartFX charts, which are driven by a MySQL query. 我正在寻找一个具有页面的网站,该页面上有一些jChartFX图表,这些图表由MySQL查询驱动。 The query is driven by a date selected on a drop down on the main page. 查询由主页上下拉菜单中选择的日期驱动。

I am struggling to structure the code properly (all completely self taught so fraught with poor practice!) so that the graph will update when a different option is selected. 我正在努力正确地构建代码结构(所有代码都是完全自学的,所以实践经验很差!),以便在选择其他选项时图形会更新。

The code is listed below, however my question is; 下面列出了代码,但是我的问题是; where should the code sit for the drawing the chart to make this work. 代码应该放在哪里绘制图表以完成此工作。 Should the function loadChart exist on the main page and echo the data in from the query from another page, or should I have the whole function on a separate page, which is loaded by the jquery, or option 3 - am I completely wide of the mark? 函数loadChart应该存在于主页上并从另一个页面的查询中回显数据,还是应该将整个函数放在单独的页面上(由jquery加载),还是选项3-我是否完全标记?

The code for the chart is; 图表的代码为; <> The echo $data is the section which echos the MySQL output, and works fine when the code and the SQL query is fixed. <> echo $ data是回显MySQL输出的部分,并且在固定代码和SQL查询后可以正常工作。

<script>
    var chart1;
    function loadChart()
      {        
           chart1 = new cfx.Chart();
            chart1.getData().setSeries(1);
                chart1.getAxisY().setMin(100);
                chart1.getAxisY().setMax(1000);
                var series1 = chart1.getSeries().getItem(0);                     series1.setGallery(cfx.Gallery.Lines);

            var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>;
                chart1.setDataSource(data);
                var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);            
         }
</script>

The SQL Query is SQL查询是

SELECT COUNT(`column_Date`) AS 'Count' FROM Dates WHERE `column_Date` > date('2013-06-01')

Note: Where the date is above 2013-06-01, I want this to change based on the drop down from the main page. 注意:如果日期大于2013-06-01,我希望根据主页上的下拉列表进行更改。

    <head>
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script>
        $(document).ready(function(){
            $("#optionschosenid").click(function(){
                if($("#optionsid").val() == "OptionA" ){
                    $("#chart").load("weeks.php");
                }
                else {
                    $("#chart").load("text_test.php");
                }

            });
        });
 </script>
</head>
<body onload="loadChart()">
<div id="row">
    <form method="post" id="weekcommencing" name="dateselector">
        <select id="optionsid" name="optionsname">
            <option value="2013-06-01">June</option>
            <option value="2013-01-01">January</option>
        </select>
        <button name="optionschosenname" id="optionschosenid"> Select Additional Option </button>
    </form>
</div> 
    <div id="chart" name="chart">
    <?php echo $data;
        echo 'hello'; ?>    
    <br /> -->
    Test 0.11
   </div>
   <button id="testId">click me</button>

   <br />
   <br />
   <div id="ChartDiv">

   </div>
   </body>

The answer to your question is most likely "option 3" - you are completely wide of the mark :) 您的问题的答案很可能是“选项3”-您完全可以了:)

I don't know what is in your PHP $data variable - you don't show where it was declared and set. 我不知道您的PHP $ data变量中包含什么-您不显示它的声明和设置位置。 I see a Javascsript variable named data. 我看到一个名为data的Javascsript变量。 I wonder if you might have the impression that javascript variables and PHP variables are visible to each other? 我想知道您是否会觉得javascript变量和PHP变量彼此可见? They most certainly are not. 他们肯定不是。

Bottom line is that you should separate everything as much as possible - as it seems you are starting to do. 最重要的是,您应该将所有内容尽可能地分开-好像您已经开始这样做了。 Include your javascript from a JS file. 包含JS文件中的JavaScript。 Include your HTML from a template. 包含模板中的HTML。

Even though you are new, you are biting off enough that you should just dive right into an MVC framework . 即使您是新手,您的期望也很高,您应该直接进入MVC框架 It will force you to learn at least some good practices. 这将迫使您至少学习一些良好做法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM