Question

我对Javascript不太熟悉所以我希望能得到一些关于如何在javascript中包含PHP变量的建议。

我编写了一个PHP代码，根据服务器负载设置超链接的变量等待时间。

PHP代码的片段是：

// set wait level
if($count_user_online <= "99") {
    $wait_level="0";
}
else if($count_user_online >= "100" && $count_user_online < "199") {
    $wait_level="60";
}
else if($count_user_online >= "200" && $count_user_online < "299") {
    $wait_level="120";
}
else if($count_user_online >= "300" && $count_user_online < "399") {
    $wait_level="180";
}
else if($count_user_online >= "400" && $count_user_online < "499") {
    $wait_level="240";
}
else if($count_user_online >= "500") {
    $wait_level="300";
}

我正在尝试在Javascript中回显$ wait_level。我已经完成了下面的HTML方法，但显然这是不正确的。任何人都可以提出功能性方法吗？

<html>
<head>
<script type="text/javascript">
window.onload=function() {
document.getElementById('redirect').style.display = 'none';
function countdown() {
if ( typeof countdown.counter == 'undefined' ) {
   countdown.counter = <?php echo $wait_level ?>; // seconds
   }
if(countdown.counter >= 0) {
   document.getElementById('count').innerHTML = countdown.counter--;
   setTimeout(countdown, 1000);
   }
else {
   document.getElementById('redirect').style.display = '';
   }
}
countdown();
};
</script>

</head>
<body>
<h2>You can can access the link in <span id="count"></span> seconds <a id="redirect" href="http://google.com/">Google</a></h2>
</body>
</html>

我知道我使用的javascript将允许您通过查看来源轻松查看超链接，但这不是我将使用的最终JavaScript代码，因此无需担心。< / p>

该脚本仅在私人服务器上使用1天，因此不需要干净，只是功能正常。

非常感谢任何帮助！

Answer 1

我将PHP转换为JavaScript的方式是使用Ajax

Ajax你可以使用HTTP Post请求从服务器加载数据，使用Ajax的好处是可以使用HTTP请求发送参数。例如。如果要发送将用于数据库查询的参数。然后你就可以这样做了，你就可以从那个数据库查询中返回数据。

我不是说在JavaScript中使用PHP是不好的做法，因为它完全可以接受，但它可能非常危险 - 你正在生成JS的部分内容，这意味着你必须生成VALID JS代码或整个代码块将被语法错误终止。

e.g。

<script type="text/javascript">
   var lastName = '<?php echo $lastName ?>';
</script>

和$lastName恰好是O'Neil，你现在引入了语法错误，因为生成的代码将是：

var lastName = 'O'Neil';
                --- string with contents O
                   --- unknown/undefined variable Neil
                     -- string followed by variable, but no operator present.
                        --- start of a new unterminated string containing a ';'

因此，如果您要继续将基于PHP的原始数据插入到JS变量中，您基本上必须使用json_encode（），这可以保证生成的JS数据在语法上是有效的JS代码

获取PHP数据的方法

服务器端 - Test1.php

<?php

if (isset($_POST['usersOnline']))
{


$count_user_online = $_POST['usersOnline'];

switch ($count_user_online) {
    case  ($count_user_online <= "99"):
            $wait_level = "0";
        break;

    case  ($count_user_online >= "100" && $count_user_online < "199"):
            $wait_level = "1";
        break;

    case  ($count_user_online >= "200" && $count_user_online < "299"):
            $wait_level = "2";
        break;
}

echo $wait_level;

}

?>

HTML方面 - Test.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">     </script>
<script>

$(document).ready(function() {
    sendUserCount("200");
    document.getElementById('redirect').style.display = 'none';
});

function countdown(count) {
     if ( typeof countdown.counter == 'undefined' ) {
        countdown.counter = count; // seconds
     }

     if(countdown.counter >= 0) {
        document.getElementById('count').innerHTML = countdown.counter--;
        setTimeout(countdown, 1000);
     }
     else {
        document.getElementById('redirect').style.display = '';
     }
  }

  function sendUserCount(userCount)
  {
     var url = document.location.href;
     $.post("test1.php",
     {
        usersOnline: userCount
     })

     .success(function (data)
     {
        console.log(data);
        countdown(data);
     });
   }

</script>

</head>
<body>
  <h2>You can can access the link in <span id="count"></span> seconds <a id="redirect" href="http://google.com/">Google</a></h2>
</body>
</html>

Answer 2

我不确定是否有更好的方法，但我已设法使用以下代码：

<html>
<head>

<div id="dom-target" style="visibility: hidden">
<?php 
    echo htmlspecialchars($wait_level); 
?>
</div>

<script type="text/javascript">
var div = document.getElementById("dom-target");
var myData = div.textContent;
window.onload=function() {
document.getElementById('redirect').style.display = 'none';
function countdown() {
if ( typeof countdown.counter == 'undefined' ) {
   countdown.counter = myData; // seconds
   }
if(countdown.counter >= 0) {
   document.getElementById('count').innerHTML = countdown.counter--;
   setTimeout(countdown, 1000);
   }
else {
   document.getElementById('redirect').style.display = '';
   }
}
countdown();
};
</script>

</head>
<body>
<h2>You can can access the link in <span id="count"></span> seconds <a id="redirect" href="http://google.com/">Google</a></h2>
</body>
</html>

Answer 3

你可以像这样

在javascript中创建参数化函数

 function countdown(counter) {
    if ( counter != 'undefined' and counter != -1  ) 
    {
       if(counter >= 0) {
        document.getElementById('count').innerHTML = counter--;
        setTimeout(countdown(counter), 500);
       }
    else {
       document.getElementById('redirect').style.display = '';
       }
    }
}
    countdown(<?php echo $wait_level ?>);

在Javascript中包含已定义的PHP变量

3 个答案: