Question

我再试一次问我的问题。我希望这次很清楚。

这是我的剧本的现场演示： http://www.virusgaming.net/test/

这是代码：

<? // I set the starting percentage to 0%. 
$something = 0; ?>      

<!-- jsProgressBarHandler prerequisites : prototype.js -->
<script type="text/javascript" src="js/prototype/prototype.js"></script>

<!-- jsProgressBarHandler core -->
<script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>        

<span style="color:#006600;font-weight:bold;">Multi Color Bar</span> <br/>
<span id="element6">Loading...</span>
<span class="extra"><a href="#" onclick="manualPB2.setPercentage('0', true);return false;"><img src="images/icons/empty.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Empty Bar'"/></a></span>
<span class="options"><a href="#" onclick="manualPB2.setPercentage('+10');return false;"><img src="images/icons/add.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Add 10%'"/></a></span>
<span class="options"><a href="#" onclick="manualPB2.setPercentage('-5');return false;"><img src="images/icons/minus.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Minus 5%'" /></a></span>
<span class="options"><a href="#" onclick="manualPB2.setPercentage('30');return false;"><img src="images/icons/set.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Set 30%'"/></a></span>
<span class="options"><a href="#" onclick="manualPB2.setPercentage('98'); manualPB2.setPercentage('30'); return false;"><img src="images/icons/fill.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Fill 98%, and then 30%'" /></a></span>
<span class="getOption"><a href="#" onclick="alert(manualPB2.getPercentage());return false;"><img src="images/icons/get.gif" alt="" title="" onmouseout="$('Text6').innerHTML ='&laquo; Select Options'" onmouseover="$('Text6').innerHTML ='Get Current %'"/></a></span>
<span id="Text6" style="font-weight:bold">&laquo; Select Options</span>

<script type="text/javascript">                     
    document.observe('dom:loaded', function() {

        manualPB2 = new JS_BRAMUS.jsProgressBar(
                    $('element6'),
                    <? echo $something; ?>,                             
                    {

                        barImage    : Array(
                            'images/bramus/percentImage_back4.png',
                            'images/bramus/percentImage_back3.png',
                            'images/bramus/percentImage_back2.png',
                            'images/bramus/percentImage_back1.png'
                        ),

                        onTick : function(pbObj) {

                            switch(pbObj.getPercentage()) {

                                case 70:
                                    alert('we are at 70%');
                                break;

                                case 100:
                                    alert('we are at 100%');                                        
                                break;                                                                                                                                                                              

                            }

                            return true; 
                        }
                    }
                );
    }, false);
</script>

我想将客户端javascript百分比传递给服务器端php变量。我用GET和POST javascript（隐藏字段，表单，锚点，onclick事件等）进行了数十次尝试但没有成功。基本上使用 onclick =“alert（manualPB2.getPercentage（））; 函数我在警报中标记当前百分比。是否可以编辑此警报以便将变量发布/获取到php？

Answer 1

请尝试此ajax调用，而不是警报，

 var url = 'YourServerSideScript.php';
 var pars = 'percentage=' + pbObj.getPercentage(); // you have to use $_POST['percentage'] on your script
 var target = 'targeDivId';
 var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: pars});

Answer 2

作为jose答案的变体（除非你期待HTML响应，否则不需要使用Ajax.Updater）Prototype确实提供了你需要的一切。

document.observe('dom:loaded', function() {
    // after existing initialising code...

    $$('.getOption a').first().observe('click', function(event) {
        new Ajax.Request('YourServerSideScript.php', {
            parameters: {
                percentage: parseInt(manualPB2.getPercentage())
            }
        });
        event.stop();
    });
});

...脚本中的值为$_POST['percentage']。我没有设置method，因为它无论如何都是POST，parameters是一个对象，这意味着Prototype会为你编码，所以省去了工作。请务必阅读manual。

parseInt会删除任何%个字符，如果它们存在于百分比中。 event.stop()整齐地阻止了锚点的正常点击行为。

将客户端javascript变量传递给服务器端php

2 个答案: