将变量从PHP移动到Javascript小部件

时间:2015-03-06 05:10:12

标签: javascript php

以下代码是一种从服务器获取行数的方法。

<?php 

  //retrieving number of rows from server

  $num_check = $handler->query("SELECT * FROM table");

  $num_to_display = $num_check->rowCount();


?>

我使用用Javascript编写的计数器小部件来提供面向客户的计数器,该计数器显示找到的行数(表中的条目数)。这个柜台是由Chris Nanney这个名字写的。我正在使用的部分内容如下。

<script>

  $(function(){

    //changed value to be a PHP variable.

    var myCounter = new flipCounter('myCounter', {value: myVar, inc: 0, pace: 1000, auto: true});

    $('#style-switcher a').on('click', function(e){
      e.preventDefault();
      $("#myCounter").removeClass().addClass('flip-counter '+$(this).data('style'));
      $('#style-switcher a').removeClass('active');
      $(this).addClass('active');
    });

//以下几行我可能不需要也会删除。但是现在它们正在使用,我认为有必要将它们包括在内

    $('#inc_slider').slider({
      range: 'max',
      value: 123,
      min: 0,
      max: 1000,
      slide: function(event, ui){
        $('#inc_value').text(ui.value);
        myCounter.setIncrement(ui.value);

        if (ui.value == 0) myCounter.setAuto(false);
        else myCounter.setAuto(true);
      }
    });

    // Pace
    $('#pace_slider').slider({
      range: 'max',
      value: 1000,
      min: 400,
      max: 2000,
      step: 100,
      slide: function(event, ui){
        myCounter.setPace(ui.value);
        $("#pace_value").text(ui.value);
      }
    });

  });
</script> 

我遇到的麻烦是将PHP变量$ number_to_display更改为Javascript变量,该变量可以通过函数的参数(特别是值字段)进行解析。一些调试表明这个数字从PHP端正确回响,所以我怀疑PHP是个问题。更有可能的问题是将其转换为Javascript。到目前为止,我已经尝试在功能本身内将其更改为JS,并且在其他论坛上的一些寻宝活动给了我以下存根,这是我最近尝试通过它。

<script language="javascript">

  / <![CDATA[

      var myVar = "<?php echo $num_to_display; ?>;""
      alert(myVar);

  // ]]>
</script>

当然,我并不是真正的JS精明,我想知道是否有人有一些在PHP和JS之间移动的最佳实践。我没有正确地声明变量或将其正确传递给函数吗?

编辑:

好的,感谢迄今为止的大力帮助,我正确地解析了varibales。我的问题是,当我把它传递给函数

$(函数(){

var myCounter = new flipCounter('myCounter', {value: myVar, inc: 0, pace: 1000, auto: true});

它还没有正确传入。我是否缺少单引号或双引号或类似名称?

3 个答案:

答案 0 :(得分:1)

不需要CDATA。这应该有效:

<script>
    var myVar = "<?= $num_to_display ?>";

    // if it's an object
    var myObject = <?= json_encode($someArray) ?>;
</script>

答案 1 :(得分:0)

我会将数据直接放在调用计数器的元素上,根据您的示例判断#myCounter。我不知道它是什么类型的结构但是我们可以说这个例子只是一个空的div

<div id="myCounter" data-counter-value="<?php echo $num_to_display ?>"></div>

那么我们只需要创建计数器就可以考虑新的数据属性:

function initFlipCounter(id, options) {
   var $counter = $(id),
       o = $.extend({}, {value: $counter.data('counterValue'), inc: 0, pace: 1000, auto: true}, options||{});

   // we used a jQuery selector with our wrapper so get the raw
   // ID since flipCounter uses document.getElementById
   return new flipCounter($counter.attr('id'), o);
}

你甚至可以扩展它以考虑所有选项。它还允许您覆盖元素上的那些。

你现在的使用情况如下:

// basic only use the value from the element and defaults in the init func
var myCounter = initFlipCounter('#myCounter');

// override some stuff
var myCounter = initFlipCounter('#myCounter', {auto: false, pace: 500});

// even override value
var myCounter = initFlipCounter('#myCounter', {value: 365, pace: 3000});

小提琴示例:http://jsfiddle.net/2kpogjjj/

答案 2 :(得分:0)

此代码将有效var a = <?php json_encode($variable) ?>;

在某些情况下,echo $variable有效。但正确的方法是json_encode($ Array)

如果数字使用echo $value