如何将变量和数据从PHP传递到JavaScript?
我在PHP中有一个变量,在JavaScript代码中需要它的值。如何将变量从PHP转换为JavaScript 我有如下代码:如何将变量和数据从PHP传递到JavaScript?,javascript,php,Javascript,Php,我在PHP中有一个变量,在JavaScript代码中需要它的值。如何将变量从PHP转换为JavaScript 我有如下代码: <?php ... $val = $myService->getValue(); // Makes an API and database call ?> <script>var number = abcd;alert(number);</script> <script>var number =
<?php
...
$val = $myService->getValue(); // Makes an API and database call
?>
<script>var number = abcd;alert(number);</script>
<script>var number = "abcd";alert(number);</script>
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
实际上有几种方法可以做到这一点。有些需要比其他人更多的开销,有些被认为比其他人更好 无特定顺序:
- 更好的层间分离-如果明天您停止使用PHP,并希望使用servlet、REST API或其他服务,则无需对JavaScript代码进行太多更改
- 可读性更强-JavaScript是JavaScript,PHP是PHP。如果不混合使用这两种语言,您可以在两种语言上获得更可读的代码
- 允许异步数据传输-从PHP获取信息可能需要花费大量时间/资源。有时候你只是不想等待信息,加载页面,让信息随时到达
- 数据不能直接在标记上找到——这意味着标记没有任何附加数据,只有JavaScript可以看到
- 延迟-AJAX创建一个HTTP请求,HTTP请求通过网络传输,并具有网络延迟
- 状态-通过单独的HTTP请求获取的数据将不包括从获取HTML文档的HTTP请求中获取的任何信息。您可能需要这些信息(例如,如果HTML文档是为了响应表单提交而生成的),如果需要,则必须以某种方式将其传递给其他用户。如果您排除了在页面中嵌入数据的可能性(如果您正在使用此技术,那么您将拥有该数据),那么这将限制您使用cookie/会话,这些cookie/会话可能会受到竞争条件的影响
- 非常容易实现-实现这一点需要花费很少的时间,并且可以理解
- 不污染源代码-变量直接输出到JavaScript,因此DOM不受影响
- 将PHP与您的数据逻辑紧密结合起来——因为PHP用于表示,所以您无法将两者清晰地分开
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
变量数据=;//别忘了额外的分号!
祝你好运 我将尝试一个更简单的答案: 问题的解释 首先,让我们了解从服务器提供页面时的事件流:
- 首先运行PHP,它生成提供给客户机的HTML
- 然后,HTML被交付到客户端,在PHP完成之后,我想强调的是,一旦代码离开服务器,PHP就完成了,不能再访问它
- 然后,带有JavaScript的HTML到达客户端,客户端可以在该HTML上执行JavaScript
- 设置cookie-cookie是在HTTP请求中发送的头,服务器和客户端都可以读取
- 将变量编码为JSON-JSON看起来非常接近JavaScript对象,大多数JSON对象都是有效的JavaScript变量
setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
// Set it with HTTP only to true.
然后,您可以使用document.cookie
:
这是一个简单的解析器,但我在上面链接的答案有更好的测试结果:
var cookies = document.cookie.split(";").
map(function(el){ return el.split("="); }).
reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
cookies["MyCookie"] // Value set with PHP.
Cookies对少量数据很有用。这就是跟踪服务经常做的事情
一旦我们有了更多数据,我们可以在JavaScript变量中使用JSON对其进行编码:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
或者使用jQuery:
$.get("/your/url").done(function(data){
// What do I do with the data?
});
现在,服务器只需要包含一个/your/url
路由/文件,其中包含获取数据并对其执行操作的代码,在您的情况下:
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
getValue();//M
$.get("/your/url").done(function(data){
// What do I do with the data?
});
<$php
...
$val = myService->getValue(); // Makes an API and database call
echo json_encode($val); // Write it to the output
$>
myPlugin.start($val); // Tried this, didn't work
myPlugin.start(); // I tried this, and it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">
</div>
<script>
$(document).ready(function() {
$('.service-container').each(function() {
var container = $(this);
var service = container.data('service');
// Variable "service" now contains the value of $myService->getValue();
});
});
</script>
<script>
var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
class mHeader {
private $scripts = array();
/**
* @param string $id Unique script identifier
* @param string $src Script src attribute
* @param array $deps An array of dependencies ( script identifiers ).
* @param array $data An array, data that will be json_encoded and available to the script.
*/
function enqueue_script($id, $src, $deps = array(), $data = array()) {
$this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
}
private function dependencies($script) {
if ($script['deps']) {
return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
}
}
private function _unset($key, &$deps, &$out) {
$out[$key] = $this->scripts[$key];
unset($deps[$key]);
}
private function flattern(&$deps, &$out = array()) {
foreach($deps as $key => $value) {
empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
}
}
function print_scripts() {
if (!$this->scripts)
return;
$deps = array_map(array($this, 'dependencies'), $this->scripts);
while ($deps)
$this->flattern($deps, $js);
foreach($js as $key => $script) {
$script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
}
}
}
$header = new mHeader();
$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));
$header->print_scripts();
<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>
<?php
$variable_1 = "QNimate";
$variable_2 = "QScutter";
?>
<span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php
var variable_1 = undefined;
var variable_2 = undefined;
window.onload = function(){
variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}
<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
<script>
<script type="text/javascript">
var js_variable = <?php echo json_encode($php_variable); ?>;
</script>
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
<script type="text/javascript" src="url_to_your_php_file.php" /></script>
<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>
<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate JavaScript code dynamically
// and share data between PHP and JavaScript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header('content-type: text/javascript');
// If you pass a $_GET variable from the JavaScript
// you should add code to validate your $_GET variable(s)
// You can add code to query a database
// using $_GET['var1'] or some other criteria
// You can add simple variable assignments
$value = 'some value';
// For the OP's needs (assumes the class object has been defined)
$val = $myService->getValue();
?>
function name() {
// Pay attention because you need to use quotes properly
// and account for possible quotes in the variable strings
// to avoid both PHP and JavaScript errors
// example assumes $val has been returned as a string
// validate $val as needed using your method of choice
var example1 = "<?php echo addslashes( $val ); ?>";
var example2 = "<?php echo "he said \\"the value\\""; ?>";
alert( example1 + ' / ' + example2 );
}
<?php
// You may even want to include additional files (.php or .js, etc.)
@include 'local_path_to_some_other_js_file.js';
@include 'local_path_to_some_other_php_file.php';
exit;
?>
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Fails:
//echo '<body onload="alert(', json_encode($myvar), ');">';
// Fails:
//echo "<body onload='alert(", json_encode($myvar), ");'>";
// Fails:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";
// Works:
//echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
// Works:
echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';
echo "</body>";
<?php
// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = 'UTF-8')
{
if ($encoding != 'UTF-8')
$string = iconv($encoding, 'UTF-8', $string);
$flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
$string = substr(json_encode($string, $flags), 1, -1);
return "'$string'";
}
<?php
$myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
// Note use of double quotes to enclose the event definition!
echo '<body onload="alert(', escapeJSString($myvar), ');">';
// Example with regular code:
echo '<script>alert(', escapeJSString($myvar), ');</script>';
echo '</body>';
<?php
$name = 'PHP variable';
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>
<script>
console.log("I am everywhere " + name);
</script>
<?php
$your_php_variable= 22;
echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
<script>var number = 4;alert(number);</script>
<script>var number = abcd;alert(number);</script>
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
<script>var number = "abcd";alert(number);</script>
<?PHP
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>
<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, image FROM phone";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
$v[] = $row;
}
echo json_encode($v);
$conn->close();
?>
function showUser(fnc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// STEP 3
var p = JSON.parse(this.responseText);
}
}
}
$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>
$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>
alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");
var highIncome=<?php echo $_SESSION['highIncome'];?>;