1。使用AJAX从服务器获取所需的数据

Question

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

我的代码如下：

<?php
     ...
     $val = $myService->getValue(); // makes an api and db call
?>

我的JavaScript代码需要val，并且看起来像是：

<script>
    myPlugin.start($val); // tried this, didn't work
    <?php myPlugin.start($val); ?> // this didn't work either
    myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
</script>

Answer 1

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

没有特别的顺序：

使用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 /会话。

实施例

使用AJAX，您需要两个页面，一个是PHP生成输出的地方，第二个是JavaScript获取输出的地方：

得到-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 * 
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well. 
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); //In the end, you need to echo the result. 
                      //All data should be json_encode()d.

                      //You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php（或任何实际页面被命名为）

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); //New request object
    oReq.onload = function() {
        //This is where you handle what to do with the response.
        //The actual data is found on this.responseText
        alert(this.responseText); //Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to 
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

文件加载完成后，上述两个文件的组合将提醒42。

问题说明

首先，让我们了解从我们的服务器提供页面时的事件流程：

首先运行PHP，它会生成提供给客户端的HTML。
然后，HTML被传递给客户端，在完成PHP之后，我想强调一旦代码离开服务器 - PHP就完成了它，并且无法再访问它。
然后，带有JavaScript的HTML到达客户端，可以在该html上执行JS。

所以，真的，要记住的核心是 HTTP是无状态。请求离开服务器后，服务器无法触及它。因此，我们可以选择：

在初始请求完成后，从客户端发送更多请求。

对初始请求中服务器必须说的内容进行编码。

解决方案

你应该问自己的核心问题是：

我在撰写网站或申请表吗？

网站主要是基于页面的，页面加载时间需要尽可能快（例如 - 维基百科）。 Web应用程序更加庞大，并且执行大量往返以获取客户端的快速信息（例如 - 股票仪表板）。

网站

在初始请求完成后从客户端发送更多请求是慢，因为它需要更多具有显着开销的HTTP请求。此外，它需要 asynchronousity ，因为在完成AJAX请求时需要一个处理程序。

我不建议发送另一个请求，除非您的网站是用于从服务器获取该信息的应用程序。

您需要快速响应时间，这会对转化和加载时间产生巨大影响。在这种情况下，对于初始正常运行时间而言，ajax请求的速度很慢，而且不需要。

您有两种解决问题的方法

设置Cookie - Cookie是HTTP请求中发送的标头，服务器和客户端都可以读取这些标头。

将变量编码为JSON - JSON看起来非常接近JavaScript对象，而大多数 JSON对象都是有效的JavaScript变量。

Setting a cookie真的不是很难，你只需给它一个值：

setcookie("MyCookie", $value); // sets the cookie to the value, remember, do not // set it with HTTP only to true.

然后，您可以read it with JavaScript使用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.

Cookie适用于少量数据。这就是跟踪服务经常做的事情。

一旦我们有了更多数据，我们就可以在JS变量中使用JSON对其进行编码：

<script> var myServerData = <?=json_encode($value)?>; // don't forget to sanitize //server data </script>

假设PHP $value json_encode能够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();（通常是）。这种技术就是StackOverflow的聊天功能（例如只使用.net而不是php）。

应用

如果您正在编写应用程序 - 突然之间，初始加载时间并不总是与应用程序的持续性能一样重要，并且它开始为单独加载数据和代码而付出代价。

我的回答here解释了如何在JavaScript中使用AJAX加载数据：

$.get("/your/url").done(function(data){ // what do I do with the data? });

或者使用jQuery：

/your/url

现在，服务器只需要包含一个<$php ... $val = myService->getValue(); // makes an api and db call echo json_encode($val); // write it to the output $>路由/文件，其中包含抓取数据并对其执行操作的代码，在您的情况下：

{{1}}

这样，我们的JS文件会询问数据并显示它，而不是要求代码或布局。当应用程序变得更高时，这更清洁并开始获得回报。它也更好地分离了关注点，它允许测试客户端代码，而不涉及任何服务器端技术，这是另一个优势。

后记：当您从PHP注入任何内容时，您必须非常了解XSS攻击媒介。它非常很难正确地逃避价值并且它的上下文敏感。如果您不确定如何处理XSS或不了解XSS，请阅读this OWASP article，this one和this question。

Answer 3

我通常在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');

        // service variable now contains the value of $myService->getValue();
    });
});
</script>

此示例使用jQuery，但可以适用于其他库或vanilla Javascript。

您可以在此处详细了解数据集属性：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 4

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode（）需要：

PHP 5.2.0或更高版本
$PHPVar编码为UTF-8，Unicode。

Answer 5

只需使用以下方法之一。

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

Answer 6

试试这个

<?php
    echo "<script> var x = ". json_encode($phpVariable)."</script>";
?>

-

- 尝试了一段时间后虽然它有效，但它会降低性能。因为php是服务器端脚本，而javascript是用户端。

Answer 7

我非常喜欢Wordpress使用enqueue和localize函数的方式，所以在这个模型之后，我编写了一个简单的类，用于根据脚本依赖关系将脚本放入页面，以及为脚本提供额外的数据。

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;
        }
    }
}

调用enqueue_script()函数用于添加脚本，设置其他脚本的源和依赖项，以及脚本所需的其他数据。

$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();

并且，上面示例的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>

无论脚本＆＃39; jquery＆＃39;在jquery-ui＆＃39;之后排队，因为它是在jquery-ui＆＃39;中定义的。它取决于＆＃39; jquery＆＃39;。 “自定义脚本”的附加数据＆＃39;它位于一个新的脚本块中并放置在它的前面，它包含mydata对象，该对象包含其他数据，现在可用于自定义脚本＆＃39;。

Answer 8

myPlugin.start($val); // tried this, didn't work

它没有用，因为$val就javascript而言是未定义的，即。 php没有为$val输出任何内容。尝试在浏览器中查看来源，以下是您将看到的内容：

myPlugin.start(); // tried this, didn't work

和

<?php myPlugin.start($val); ?> // this didn't work either

这不起作用，因为php会尝试将myPlugin视为常量，当失败时它将尝试将其视为字符串'myPlugin'，它将尝试与start()连接php函数myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails的输出，由于未定义，它将产生致命错误

和

myPlugin

虽然这最有可能奏效，但由于php正在生成带有预期参数的有效javascript，如果失败，可能是因为json_encode()还没有准备就绪。检查执行顺序。

另外你应该注意php out put是不安全的，应该用myPlugin.start(<?=$val?>过滤

编辑

因为我没有注意到$val中缺少的括号： - \

正如@Second Rikudo指出的那样，为了使其正常工作$val="42);"需要包含右括号，例如：myPlugin.start(42);

这意味着php现在将生成{{1}}并且在javascript执行时将按预期工作

Answer 9

我已经提出了一种使用PHP分配JavaScript变量的简单方法。

它使用HTML5数据属性来存储PHP变量，然后在页面加载时将其分配给JavaScript。

可以找到完整的教程here

示例：

<?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

她是JS代码

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");
}

Answer 10

这里有一个我看不到作为选项发布。它类似于使用ajax，但显然不同。

首先，将脚本的源代码直接设置为PHP文件。

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

您甚至可以将变量传递回PHP文件，例如：

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

然后在“your_php_file.php”中：

<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate javascripts 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 '"' . $val . '"'; ?>';
    var example2 = '<?php echo '"' . $value . '"'; ?>';
    var example3 = '<?php echo '"some other data"'; ?>';
    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;
?>

Answer 11

将数据转换为 JSON
调用 AJAX 接收 JSON 文件
将 JSON 转换为 Javascript 对象

示例：

STEP 1

<?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();
?>

第2步

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);
      }
   }
}

Answer 12

这是诀窍：

使用该变量'PHP'：

<?php 
    $name = 'PHP variable';
    echo '<script>';
    echo 'var name = ' . json_encode($name) . ';';
    echo '</script>';
?>

现在你有一个名为'name'的JS变量，这是你的'Javascript'来使用该变量：
```
<script>
     console.log("i am everywhere " + name);
</script>
```

Answer 13

经过大量研究，我找到了一种轻松传递各种变量的最简单方法。

在服务器脚本中，您有两个变量，正在尝试将它们发送到客户端脚本：

$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>';

在页面上调用的任何JavaScript中，只需调用这些变量即可。

Answer 14

我假设要传输的数据是一个字符串。

正如其他评论者所说，AJAX是一种可能的解决方案，但缺点超过了优点：它有延迟并且编程更难（它需要代码来检索服务器端和客户端的值），当一个更简单的转义函数就足够了。

所以，我们又回来了。 json_encode($string)工作，如果您将源字符串编码为UTF-8，如果它尚未编码，因为json_encode需要UTF-8数据。如果字符串在ISO-8859-1中，那么您只需使用json_encode(utf8_encode($string));否则，您始终可以先使用iconv进行转换。

但是有一个很大的问题。如果您在事件中使用它，则需要在结果上运行htmlspecialchars()以使其成为正确的代码。然后你要么小心使用双引号来封闭事件，要么总是将ENT_QUOTES添加到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>";

但是，您不能在常规JS代码上使用htmlspecialchars（<script> ... </script>标记中包含的代码）。通过在编写事件代码时忘记htmlspecialchars结果，这使得此函数容易出错。

可以编写一个没有该问题的函数，并且可以在事件和常规JS代码中使用，只要您将事件始终用单引号括起来，或者始终用双引号括起来。这是我的建议，要求他们使用双引号（我更喜欢）：

<?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 5.4+。用法示例：

<?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>';

Answer 15

假设您的变量始终是整数，在这种情况下更容易

<?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>

但是在javascript中，这是语法错误。

因此在php中，我们有一个函数调用json_encode，该函数将字符串编码为json对象。

<?PHP
$number = 'abcd';

echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';

?>

由于json中的abcd是"abcd"，所以看起来像这样：

<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>';

?>

您的JavaScript如下所示：

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

控制台输出

Answer 16

根据您的代码

<$php
     $val = $myService->getValue(); // makes an api and db call
     echo '<span id="value">'.$val.'</span>';
$>

现在你可以使用DOM获取价值，使用span id的innerHTML，在这种情况下你不需要对服务器，或ajax或任何其他东西进行任何调用。

你的页面将使用php打印出来，你的javascript将使用DOM获得价值。

Answer 17

<?php

    $val = $myService->getValue(); // Makes an API and database call

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

Answer 18

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS （yourexternal.js）

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

输出

苹果色为黄色，草莓色为红色，奇异果颜色是绿色。

Answer 19

对于那些使用下面的代码有问题并且继续显示<?php echo $username?>或类似内容的人。通过添加此＆＃39; AddType application / x-httpd-php来编辑mime_module部分中的httpd.conf .html .htm＆＃39;因为它可能会默认禁用。

   <?php
        $username = 1;
    ?>

    <script type="text/javascript">
        var myData = <?php echo $username ?>;
        console.log(myData);
        alert(myData);
    </script>

Answer 20

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

这将有效。它只是分配一个javascript变量，然后传递一个现有的php变量的值。由于php在这里写了javascript行，它具有php变量的值，可以直接传递它。

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

20 个答案:

1。使用AJAX从服务器获取所需的数据

赞成

缺点

实施例

得到-data.php

index.php（或任何实际页面被命名为）

更多阅读材料

2。在某处将数据回显到页面中，并使用JavaScript从DOM获取信息

赞成

缺点

实施例

的index.php

3。将数据直接回显到JavaScript

赞成

缺点

实施例

问题说明

解决方案

我在撰写网站或申请表吗？

网站

应用