如何将变量和数据从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>
实际上有几种方法可以做到这一点。有些需要比其他人更多的开销，有些被认为比其他人更好 无特定顺序： 使用AJAX从服务器获取所需的数据。 将数据回送到页面的某个位置，并使用JavaScript从DOM获取信息。 将数据直接回显到JavaScript。 在这篇文章中，我们将研究上述每种方法，并了解每种方法的优缺点，以及如何实现它们 1.使用AJAX从服务器获取所需的数据 这种方法被认为是最好的，因为服务器端脚本和客户端脚本是完全分开的 赞成的意见 更好的层间分离——如果明天您停止使用PHP，并希望使用servlet、RESTAPI或其他服务，则无需对JavaScript代码进行太多更改。 更具可读性——JavaScript是JavaScript，PHP是PHP。如果不混合使用这两种语言，您可以在两种语言上获得更可读的代码。 允许异步数据传输-从PHP获取信息可能需要花费大量的时间/资源。有时候你只是不想等待信息，加载页面，让信息随时到达。 数据不是直接在标记上找到的——这意味着标记没有任何附加数据，只有JavaScript可以看到它。 欺骗 延迟-AJAX创建HTTP请求，HTTP请求通过网络传输，并具有网络延迟。 状态-通过单独的HTTP请求获取的数据不会包含从获取HTML文档的HTTP请求中获取的任何信息。您可能需要这些信息，例如，如果HTML文档是为了响应表单提交而生成的，并且如果需要，则必须以某种方式将其传递给其他人。如果您已经排除了在页面中嵌入数据的可能性（如果您正在使用此技术），那么这将限制您使用cookie/会话，这些cookie/会话可能会受到竞争条件的影响。 实现示例 使用AJAX，您需要两个页面，一个是PHP生成输出的页面，另一个是JavaScript获取输出的页面： get-data.php 3.将数据直接回显到JavaScript 这可能是最容易理解的 赞成的意见 非常容易实现-只需很少的时间就可以实现，并且可以理解。 不脏源代码-变量直接输出到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。 实际上，这里要记住的核心是HTTP是无状态的。一旦请求离开服务器，服务器就无法触摸它。因此，我们可以选择： 完成初始请求后，从客户端发送更多请求。 对服务器在初始请求中必须说的内容进行编码。 解决 你应该问自己的核心问题是： 我是在写网站还是在写申请？ 网站主要基于页面，页面加载时间需要尽可能快，例如维基百科。Web应用程序更重于AJAX，执行大量往返以获取客户端快速信息，例如股票仪表板 网站 在初始请求完成后，从客户端发送更多请求的速度很慢，因为它需要更多的HTTP请求，这会带来很大的开销。此外，它需要异步性，因为发出AJAX请求需要一个处理程序来处理完成的时间 除非你的站点是一个从服务器获取信息的应用程序，否则我不建议再提出一个请求 您需要对转换和加载时间有巨大影响的快速响应时间。在这种情况下，发出Ajax请求对于初始正常运行时间来说是缓慢的，而且是不必要的 你有两种方法来解决这个问题 设置cookie-cookies是在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.
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.
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
$.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(); // I tried this, and it didn't work
这意味着PHP现在将生成myPlugin.start42；当JavaScript代码执行时，它将按预期工作。我通常在HTML中使用data-*属性
<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>
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
虽然它可以工作，但会降低性能。由于PHP是服务器端脚本，而JavaScript是用户端脚本。我非常喜欢WordPress使用其和函数的方式，因此遵循该模型，我编写了一个简单的类，用于根据脚本依赖关系将脚本放入页面，并为脚本提供额外的数据
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>
“自定义脚本”的其他数据位于一个新的脚本块内，并放在它前面，它包含mydata对象，该对象保存其他数据，现在可供“自定义脚本”使用。我提出了一种使用PHP分配JavaScript变量的简单方法 它使用HTML5数据属性来存储PHP变量，然后在页面加载时将其分配给JavaScript 可以找到完整的教程 例如：
<?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
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
您的页面将使用PHP打印它，您的JavaScript将使用DOM获取值。这里有一个我不认为作为选项发布的页面。它与使用Ajax类似，但明显不同 首先，将脚本的源代码直接设置为PHP文件
<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;
?>
我假设要传输的数据是一个字符串 正如其他评论者所说，AJAX是一种可能的解决方案，但弊大于利：它有延迟，编程更困难。它需要代码来检索服务器端和客户端的值，而简单的转义函数就足够了 所以，我们又回到了逃跑。如果您先将源字符串编码为UTF-8，那么json_encode$string就可以工作，因为json_encode需要UTF-8数据。如果字符串在ISO-8859-1中，那么您可以简单地使用json_encodeutf8_encode$string；否则，您可以始终使用iconv先进行转换 但是有一个大问题。如果在事件中使用它，则需要对结果运行htmlspecialchars，以使其成为正确的代码。然后，您必须小心使用双引号将事件括起来，或者始终将ENT_引号添加到htmlspecialchars。例如：
<?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
$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>
它只是分配一个JavaScript变量，然后传递一个现有PHP变量的值。因为PHP在这里写JavaScript行，所以它有PHP变量的值，可以直接传递它。假设您的变量始终是整数。在这种情况下，这更容易：
<?PHP
$number = 4;
echo '<script>';
echo 'var number = ' . $number . ';';
echo 'alert(number);';
echo '</script>';
?>
<?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
$details = [
'name' => 'supun',
'age' => 456,
'weight' => '55'
];
echo '<script>';
echo 'var details = ' . json_encode($details) . ';';
echo 'alert(details);';
echo 'console.log(details);';
echo '</script>';
?>
<?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
$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
经过大量研究，我发现最简单的方法是轻松地传递各种变量 在服务器脚本中，有两个变量，您正试图将它们发送到客户端脚本：
$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> ";
?>
你可以用这个方法。别忘了最后一个分号PHP没有简单的JavaScript转义函数-json_encode怎么了？我不同意高度不安全！！而且结构化数据很难处理。毕竟，将数据编码为JSON JavaScript对象符号就是这样！异步性在发出AJAX请求时所带来的巨大开销和代码复杂性如何？在JavaScript轻型网站上工作时，发出AJAX请求是乏味的，不是最佳做法。@BenjaminGruenbaum-JS是无效的JSON是不相关的。我想不出任何JSON在赋值右边的JavaScript中是无效的。@SecondRikudo在方法3中，这个例子会杀死网站。示例：。有关详细信息，请参阅。解决方案：UsetoEscape需要PHP5.3.0。更一般地说，编码被定义为一系列字符，概念对象的存在是一种哲学上的东西。但是，也有JSON对象，它们是由JSON语法定义的。{}是一个有效的JSON对象-看看您是否在使用该定义，那么所有JSON对象在JS中都是有效的。@注意其中的微妙之处：JavaScript有它的，JSON有它的-它们不一样。当人们误用术语JSON对象时，他们指的是JS对象，在JavaScript中，JSON用作数据序列化格式，JSON对象出现在字符串中，有点像服务器端语言中的SQL查询。然而，在这个答案中，JSON方法依赖于一个事实，即大多数JSON对象也是有效的JavaScript对象，因此我们将JSON对象写入JavaScript代码。@cHao啊，但我昨天预见到了这个时刻：好的，你让我明白了尽管如此，它仍然安全；PHP的默认行为是将这些字符与其他非ASCII字符一起转义，因此它们永远不会进入输出，除非作为\u2028等。您必须明确告诉它不要这样做。myPlugin.start中缺少的右括号是故意的吗？这是真的吗？这是Ben写的，但是如果$val是42，它会很好用：对于大多数人来说，这个答案对我来说是最简单的。你赢得了一张赞成票！我同意，我不想对一个简单的问题过度分析和实施一个奇特的解决方案。这种方法将PHP与Javascript分开，因此PHP仍然只生成HTML，而Javascript可以位于PHP文件的外部。我同意这是最好的选择。它解决了所有的安全问题，没有延迟。您可以将JS完全排除在HTML页面之外。HTML需要由应用服务器提供，但JS和CSS不需要。它也更具语义。@Quentin您应该转义所有输出，除非输出是HTML本身。@asdasd-是的，我只是用您的答案中的代码来解决具体问题，而不是一般情况。我们正在寻找提供一些解释和上下文的长答案。不要只给出一句话的答案；解释为什么你的答案是正确的，最好是引用。不包含解释的答案可能会被删除。这是写在这个问题上的。没什么要解释的，把你的php变量写在一个php代码中，它会在php代码中得到响应，你确定吗？你看到这个问题的答案了吗？这解释得很清楚。更不用说您的解决方案不安全$phpVariable='42；“我是邪恶的！”；这是我的建议，它解决了我的问题，我在前面的答案中没有找到它，所以我添加了，希望有人会感兴趣。这里添加了echo，将其打印到包含php代码的网页上，或者它只是将数据放入js变量的语法的一部分。@YosraNagatiJSON编码您的数据：myPlugin.start；这比现有答案有什么价值？保持简单明了。对于所有有很多时间深入解释的用户来说，这可能是一个愚蠢的问题，但我对PHP世界是绝对陌生的。在.php文件中编写上述代码后，如何访问js_变量
在我的JavaScript文件或index.html文件中？@AnkitPrajapati尝试通过检查文档就绪状态来访问它。使用下面的脚本。document.onreadystatechange==>{if document.readyState===='complete'{//document ready alertjs_variable}}；由于变量存在于生成HTML的PHP脚本中，因此您错过了动态生成var1=value1的重要步骤。如果数据中包含一个“字符”，那么您的脚本就会中断。@Quentin代码示例不会出现所示的错误。它是用来演示用法的。如果程序员对编码有如此深入的了解，他们就会理解$\u GET变量中单引号/双引号的含义——无论如何都应该对其进行URL编码。var1！=[一些HTML代码]。。。显然，var1==value1。简单地说，你错了，我错过了任何东西。示例脚本是完整的，正如您所看到的，没有生成任何HTML——OP也没有提到HTML。它不应该被一些喜欢触发的旁路者否决——收回否决问题中的代码表明OP不理解引用/转义。对这一点缺乏了解是整个问题的症结所在！虽然这个例子已经完成，但它并不是一个如何解决问题的例子。@Quentin确切地说，OP是如何证明他们不理解引用/转义的？这是一个如何解决问题的示例，因为OP询问如何将PHP数据获取到javascript-我的示例是一个在任何其他回答中都没有提到的方法，该代码对$val进行转义或编码，有时有效，有时无效：myPlugin.start//有时有效，但有时它会失败当数据属性是问题的合理解决方案时，如果不转义其中的数据，则最终会出现与原始问题类似的问题。只是你需要用HTML而不是JS来转义它们。这段代码容易受到XSS的攻击，因为它不会转义像这样的字符。还有，类似的解决方案已经被提出了。有没有什么方法可以让它不被打印到源代码中呢？我正在传递一个巨大的数组，它阻塞了源代码。你能提供一个示例测试用例吗？这和3不一样吗。将数据直接回显到中的JavaScript？那个看起来更好。不起作用-1
<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'];?>;