JQUERY - 存储php变量并在jquery脚本中回显它?

时间:2014-03-05 21:25:59

标签: php jquery

是否可以将$ data变量发送到url:section中的jquery脚本以从不同的php文件获取源代码? (新手程序员)。 我需要能够做这样的事情,例如:

var source =
            {
                 datatype: "json",
                 datafields: [
                     { name: 'timeserver', type: 'time'},
                     { name: 'val1', type: 'number'},

                ],

                url: '<?php echo $data; ?>.php',

                cache: false
            };


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var theme = 'classic';

            var source =
            {
                 datatype: "json",
                 datafields: [
                     { name: 'timeserver', type: 'time'},
                     { name: 'val1', type: 'number'},

                ],
                url: 'data.php',
                cache: false
            };      

           var dataAdapter = new $.jqx.dataAdapter(source,
            {
                autoBind: true,
                async: false,
                downloadComplete: function () { },
                loadComplete: function () { },
                loadError: function () { }
            });

         // prepare jqxChart settings
            var settings = {
                title: "Temperatura",
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'timeserver',
                        formatFunction: function (value) {
                            return $.jqx.dataFormat.formatdate(value, 'HH:mm:ss');
                        },
                        showTickMarks: true,
                        tickMarksInterval: Math.round(dataAdapter.records.length / 6),
                        tickMarksColor: '#888888',
                        unitInterval: Math.round(dataAdapter.records.length / 6),
                        showGridLines: true,
                        gridLinesInterval: Math.round(dataAdapter.records.length / 3),
                        gridLinesColor: '#888888',
                        axisSize: 'auto'                    
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            valueAxis:
                            {
                                displayValueAxis: true,
                                description: 'Temperatura',
                                //descriptionClass: 'css-class-name',
                                axisSize: 'auto',
                                tickMarksColor: '#888888',
                                unitInterval: 5,
                                minValue: 10,
                                maxValue: 50                          
                            },
                            series: [
                                    { dataField: 'val1', displayText: 'Temperatura' }
                              ]
                        }
                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
    <style type="text/css">
</style> 
</head>
<body class='default'>
    <!-- <div class="flip3D"> 
         <div class="back">-->
         <div style="width:670px; height:400px" id="jqxChart">
         </div>
         <!--</div> 
         <div class="front"><div style="width:670px; height:400px" id="jqxChart"></div></div> 
     </div> -->
      <div class="flip3D"> 
<?php
// define variables and set to empty values
$data = $data1h = $data24h = $data7zile = $data1luna = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")
{
   $data = test_input($_POST["gender"]); 
 }  
function test_input($data)
{
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
?>

<h2>Arhiva</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

   Select:
   <input type="radio" name="gender" value="data" >Curent
   <input type="radio" name="gender" value="data1h" >Ultima ora
   <input type="radio" name="gender" value="data24h" >Ultima zi
   <input type="radio" name="gender" value="data7zile" >Ultima saptamana
   <input type="radio" name="gender" value="data1luna" >Ultima luna
   <br><br>
    <input type="submit" name="submit" value="Submit"> 

</form>
<?php
echo json_encode($data);
?>
</div> 
</body>

3 个答案:

答案 0 :(得分:0)

如果是关于那部分的话:

url: '<?php echo $data; ?>.php'

是的,这是可能的。

答案 1 :(得分:0)

var data = "<?php echo data; ?>";

以上一行放在PHP模板/ View / Controller

在jQuery中的用法:

url : data + '.php'

答案 2 :(得分:0)

其他答案可能有效,但它们不是正确的方法。

正确的方法是使用json_encode

var data = <?php echo json_encode($data) ?>;

请注意,php语句周围没有引号。 json_encode将专门为javascript转义字符,并且它可以正确处理不同类型和空变量。

<强>实施例

<?php
    $str = "Hello World";
    $nothing = null;
    $arr = ['apple', 'orange', 'banana'];
    $user = array(
        'name' => 'Rob',
        'age' => 42,
        'admin' => true,
    );
?>

<script type="text/javascript">
    var str = <?php echo json_encode($str) ?>,
        nothing = <?php echo json_encode($nothing) ?>,
        arr = <?php echo json_encode($arr) ?>,
        user = <?php echo json_encode($user) ?>;
</script>



// Results in all valid javascript variables
var str = "Hello World",
    nothing = null,
    arr = ["apple","orange","banana"],
    user = {"name":"Rob","age":42,"admin":true};