如何将变量和数据从PHP传递到JavaScript？

我在PHP中有一个变量，在JavaScript代码中需要它的值。如何将变量从PHP转换为JavaScript

我有如下代码：

<?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、REST API或其他服务，则无需对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-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'];?>;