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

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

javascript php

如何将变量和数据从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中有一个变量，在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 -->


变量数据=；//别忘了额外的分号！

祝你好运

实际上有几种方法可以做到这一点。有些需要比其他人更多的开销，有些被认为比其他人更好

无特定顺序：

使用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 -->

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>

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

$.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'];?>;