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


664

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

我有看起来像这样的代码:

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

我有需要val和看起来类似以下内容的JavaScript代码:

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

2
遗漏的右括号是myPlugin.start(<?=$val?>故意的吗?“有时可行”是真的吗?
安德鲁

2
好吧,这个实际上是由Ben制作的,但是我们只能说,如果$ val "42)"可以很好地工作:D
Madara's Ghost

Answers:


877

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

没有特别的顺序:

  1. 使用AJAX从服务器获取所需的数据。
  2. 将数据回显到页面中的某个位置,然后使用JavaScript从DOM获取信息。
  3. 将数据直接回显到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获取该输出的位置:

get-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当文件完成加载时,以上两个文件的组合将发出警报。

更多阅读材料

2.将数据回显到页面中的某个位置,然后使用JavaScript从DOM获取信息。

这种方法不如AJAX更好,但仍具有其优点。它仍然比较 PHP和JavaScript之间的感觉,有没有直接PHP在JavaScript中分离出来。

优点

  • 快速 -DOM操作通常很快,因此您可以相对快速地存储和访问许多数据。

缺点

  • 潜在的非语义标记 -通常,发生的事情是您使用某种方式<input type=hidden>来存储信息,因为从中获取信息更加容易inputNode.value,但是这样做意味着您在HTML中具有无意义的元素。HTML具有<meta>用于有关文档的数据的元素,而HTML 5引入data-*了专门用于可与特定元素相关联的JavaScript读取的数据属性。
  • 使源代码变脏-PHP生成的数据直接输出到HTML源代码,这意味着您将获得更大,更集中的HTML源代码。
  • 很难获得结构化数据 -结构化数据必须是有效的HTML,否则您必须自己转义和转换字符串。
  • 将PHP与您的数据逻辑紧密结合 -因为在演示中使用了PHP,所以您不能将两者完全分开。

实施实例

这样做的目的是创建某种元素,该元素不会显示给用户,但对JavaScript可见。

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

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

祝好运!


70
“ PHP没有琐碎的JavaScript转义功能” —这是json_encode怎么回事?
昆汀2014年

34
我不同意“高度不安全!!” 和“结构化数据很难”。将数据编码为JSON(毕竟是JavaScript对象符号),然后就可以了!
el.pescado 2014年

14
发出AJAX请求时会引入大量的开销和代码复杂性异步吗?在JavaScript light网站上工作时-提出AJAX请求是乏味而不是最佳实践。
本杰明·

8
@BenjaminGruenbaum — JS是无效的JSON是无关紧要的。我想不出任何在工作分配右侧的JavaScript中无效的JSON。
昆汀

7
@SecondRikudo在方法3中,该示例可以杀死该网站。范例:<?php $output = '<!--<script>'; echo json_encode($output); ?>。有关详细信息,请参见此问题。解决方案:JSON_HEX_TAG用于转义<>(需要PHP 5.3.0)。

90

我将尝试一个简单的答案:

问题说明

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

  • 首先运行PHP,它将生成供客户端使用的HTML。
  • 然后,将HTML交付给客户端,在PHP完成后,我想强调一下,一旦代码离开服务器,PHP就完成了,并且无法再访问它。
  • 然后,带有JavaScript的HTML到达客户端,客户端可以在该HTML上执行JavaScript。

所以确实,这里要记住的核心是HTTP是无状态的。请求离开服务器后,服务器将无法触摸它。因此,我们可以选择:

  1. 初始请求完成,从客户端发送更多请求。
  2. 编码服务器在初始请求中必须说的内容。

解决方案

您应该问自己的核心问题是:

我在写网站还是应用程序?

网站主要基于页面,并且页面加载时间需要尽可能快(例如Wikipedia)。Web应用程序的AJAX更为繁重,并且需要执行许多往返操作才能快速获取客户端信息(例如-库存仪表板)。

网站

初始请求完成后,从客户端发送更多请求的速度慢,因为它需要更多具有大量开销的HTTP请求。而且,它要求异步,因为发出AJAX请求需要一个处理程序以完成请求。

建议再次提出请求,除非您的站点是用于从服务器获取该信息的应用程序

您需要快速的响应时间,这对转换和加载时间有很大的影响。在这种情况下,发出Ajax请求对于初始正常运行时间很慢,因此是不需要的。

您有两种方法可以解决此问题

  • 设置cookie -cookie是服务器和客户端均可读取的HTTP请求中发送的标头。
  • 将变量编码为JSON -JSON看起来非常接近JavaScript对象,并且大多数 JSON对象都是有效的JavaScript变量。

设置cookie确实不是很困难,您只需为其分配一个值即可:

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

然后,您可以使用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.

Cookies有助于获取少量数据。这就是跟踪服务经常做的事情。

一旦有了更多数据,我们就可以使用JavaScript变量中的JSON对其进行编码:

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

假设$valuejson_encode能够在PHP端(通常是这样)。例如,此技术就是Stack Overflow对其聊天进行的处理(仅使用.NET而不是PHP)。

应用

如果您正在编写应用程序,突然之间,初始加载时间并不总是与应用程序的持续性能一样重要,并且开始获得回报,分别加载数据和代码。

在这里的答案说明了如何在JavaScript中使用AJAX加载数据:

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

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

这样,我们的JavaScript文件会要求数据并显示它,而不是要求代码或布局。这是更干净的应用程序,随着应用程序变得更高,它开始获得回报。它也可以更好地分离关注点,并且可以在不涉及任何服务器端技术的情况下测试客户端代码,这是另一个优点。

附言:从PHP到JavaScript注入任何东西时,您必须非常了解XSS攻击媒介。这是非常难以逃脱正确的价值观和它的上下文敏感的。如果您不确定如何处理XSS,或者不知道它-请阅读此文章OWASP这个这个问题


4
@cHao更一般地-编码被定义为字符序列,概念对象的存在是哲学上的。但是,存在诸如JSON对象之类的东西,它们由JSON语法定义。{}是有效的JSON对象-请参阅json.org
Benjamin Gruenbaum

1
但是,如果使用该定义,则所有 “ JSON对象”在JS中均有效。
cHao 2014年

1
@cHao请注意其中的细微之处:JavaScript具有对象的概念,而JSON具有对象的概念 -它们是不同的。当人们滥用术语“ JSON对象”时,它们表示一个JS对象,在JavaScript领域中-JSON被用作数据序列化格式,并且JSON对象出现在字符串内(类似于服务器端语言中的SQL查询)。但是,在此答案中,JSON方法依赖于以下事实:大多数 JSON对象也是有效的JavaScript对象,因此我们将JSON对象写入JavaScript代码。
本杰明·格林鲍姆

1
@cHao Ah,但是我昨天已经预见到这一刻了:)stackoverflow.com/questions/23752156/…–
本杰明·

2
好,你让我在那里。:)不过还是安全的;PHP的默认行为是转义此类字符(以及其他非ASCII字符),因此,除as \u2028等外,它们绝不会进入输出。您必须明确地告诉它不要这样做。
cHao 2014年

85

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

本示例使用jQuery,但可以将其改编为另一个库或原始JavaScript。

您可以在此处阅读有关数据集属性的更多信息:https : //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset


4
我同意,不想对一个简单的问题进行过多的分析和实施一个理想的解决方案。此方法将PHP与Javascript分开,因此PHP仍仅生成HTML,而Javascript可以在PHP文件外部。
alds 2014年

2
我同意这是最好的选择。它解决了所有安全问题,而没有延迟。您可以将JS完全排除在HTML页面之外。HTML需要由应用程序服务器提供,而JS(和CSS)则不需要。这也更具语义。
Ryan

1
@Quentin除非输出本身是HTML本身,否则应转储所有输出。
yuikonnu

2
@asdasd —是的,我只是在回答您的代码中的特定问题,而不是一般情况。
2015年

1
@kanji –没有最佳实践;div很好,但是您可以使用任何喜欢的标签;必须在body虽然。
Timm '18


19

只需使用以下方法之一。

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

4
与现有答案相比,这有什么价值?
本杰明·格林鲍姆

5
保持简单明了。对于确实有很多时间来深入解释的所有用户
Nishant Mendiratta 2015年

1
简单就是更好
Doberon

可能这是一个愚蠢的问题,但是我绝对不熟悉PHP世界。将上述代码写入.php文件后,如何访问我的JavaScript文件或“ index.html”文件中的“ js_variable”?
Ankit Prajapati

@AnkitPrajapati尝试通过检查文档准备状态来访问它。使用以下脚本。 document.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready alert(js_variable) } };
Nishant Mendiratta

11

我非常喜欢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;
        }
    }
}

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>

不管脚本'jquery'在'jquery-ui'之后入队,它都是在'jquery-ui'中定义的,因为它依赖于'jquery',因此在它之前被打印。“自定义脚本”的其他数据位于新脚本块中,并位于其前面,它包含mydata保存其他数据的对象,这些对象现在可用于“自定义脚本”。


10

尝试这个:

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

-

-尝试了一段时间后

虽然可以,但是会降低性能。因为PHP是服务器端脚本,而JavaScript是用户端。


4
我们正在寻找能提供一些解释和上下文的长答案。不要仅仅给出一个答案。解释为什么你的答案是正确的,最好是引用。不包含说明的答案可能会被删除。这是写在问题上的。
马达拉的幽灵

3
没有什么要解释的,可以在<script tag>中写下您的php变量,该变量在php代码中得到了回应
Yosra Nagati 2014年

5
你确定吗?您看到这个问题的最佳答案了吗?它解释了很多。更不用说您的解决方案是不安全的。 $phpVariable = '42"; alert("I am evil!");';
马达拉的幽灵

9
这是我的建议,它解决了我的问题,我在以前的答案中没有找到,所以我补充说,希望有人觉得它很有趣
Yosra Nagati 2014年

1
是在此处添加回显以将其打印在包含此php代码的网页上,或者只是将数据放入js变量的语法的一部分。@ YosraNagati
SUMIT KUMAR SINGH

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

它不起作用,因为$val就JavaScript而言,它是未定义的,即PHP代码未为输出任何内容$val。尝试在浏览器中查看源代码,这是您将看到的内容:

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

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

这是行不通的,因为PHP将尝试将其myPlugin视为常量,而在失败时,它将尝试将其视为字符串'myPlugin',它将尝试与PHP函数的输出连接,start()并且由于未定义,它将产生致命错误。错误。

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

尽管这最有可能行得通,但是由于PHP代码使用预期的参数生成有效的JavaScript,但如果失败,则可能是因为myPlugin尚未准备好。检查您的执行顺序。

另外您还应该注意,PHP代码输出不安全,应使用 json_encode()

编辑

因为我没注意到myPlugin.start(<?=$val?>:-\中缺少括号

正如@Second Rikudo指出的那样,要使其正常工作,$val需要包含右括号,例如:$val="42);"

这意味着PHP现在将产生myPlugin.start(42);并在由JavaScript代码执行时按预期工作。


JSON编码您的数据:myPlugin.start(<?=json_encode($val)?>);
kingprawn

6

我提出了一种使用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

这是JavaScript代码

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

2
尽管数据属性是解决该问题的合理方法,但是如果您不对其中的数据进行转义,则会遇到与原始问题类似的问题。只是您需要将其转义为HTML而不是JS。
昆汀

5
  1. 将数据转换为JSON
  2. 调用AJAX接收JSON文件
  3. JSON转换为Javascript对象

例:

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

5

这是我看不到的一种选择。它与使用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 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 '"' . $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;
?>

由于该变量存在于生成HTML的PHP​​脚本中,因此您错过了动态生成的重要步骤 var1=value1。照常来看,如果数据包含'字符,脚本将中断。
2015年

@Quentin代码示例可以正常工作,没有显示的错误。这是演示用法。如果程序员对编码的工作如此之深,他们将理解$ _GET变量中单引号/双引号的含义-无论如何都应使用urlencode。var1 != [some HTML code]……显然var1=="value1"。说白了,你错了,我错过了任何东西。示例脚本是完整的,并且您可以看到,它不会生成任何HTML,并且OP没有提及HTML。它不值得某个触发快乐的旁路绕过–缩回
向下投票

问题中的代码表明OP无法理解引用/转义。对此缺乏了解是整个问题!尽管该示例已完成,但它不是解决问题中所表达问题的示例。
2015年

@Quentin究竟OP如何证明他们不理解引用/转义?它是解决问题的一个示例,因为OP询问如何将PHP数据获取到javascript中-我的示例是其他任何答案中均未提及的一种方法
aequalsb

使用这段代码,它无法逃脱或编码$val,并且有时有效,有时却无效:myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
Quentin

3

这是窍门:

  1. 这是使用该变量的“ PHP”

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
  2. 现在,您有了一个名为的JavaScript变量'name',这是使用该变量的JavaScript代码:

    <script>
         console.log("I am everywhere " + name);
    </script>

有什么方法可以使它实际上不会打印到源代码中吗?我要传递的数组很大,它阻塞了源代码。
威廉·霍利,

1
您能否提供示例测试用例?
拉敏·塔吉扎达

这与答案中的 “ 3.将数据直接回显到JavaScript”不一样吗?那看起来更好。
汉字

3

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

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

由于abcd在JSON中"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>

控制台输出

在此处输入图片说明


2

经过大量研究,我发现最简单的方法是轻松传递各种变量。

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

$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代码中,只需调用这些变量即可。


1

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

正如其他评论者所说的那样,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>";

但是,您不能htmlspecialchars在常规JavaScript代码(<script>... </script>标记中包含的代码)上使用。由于忘记了使用该功能,因此容易出错htmlspecialchars在编写事件代码时结果。

只要您将事件始终用单引号或双引号引起来,就可以编写一个没有问题的函数,并且可以在事件和常规JavaScript代码中使用该函数。这是我的建议,要求它们使用双引号(我更喜欢):

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

0

根据您的代码

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

现在,您可以使用DOM来获取价值,使用span ID的innerHTML,在这种情况下,您无需进行任何服务器调用,Ajax或其他任何操作。

您的页面将使用PHP进行打印,而JavaScript将通过DOM获得价值。


该代码容易受到XSS的攻击,因为它不会转义像<和这样的字符>。同样,已经提出了类似的解决方案。
米哈尔Perłakowski

0
<?php

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

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

?>

0

的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'] + ".");

输出值

苹果色为黄色,草莓色为红色,猕猴桃色为绿色。


-2

对于那些在使用下面的代码时<?php echo $username?>遇到问题并且持续显示或类似问题的人,请通过添加此“ AddType application / x-httpd-php .html .htm”来编辑mime_module部分中的httpd.conf,因为它可能已被禁用默认。

<?php
    $username = 1;
?>

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

@MadaraUchiha你能解释为什么吗?
Nikita

3
因为,如果$username === "hello",那么您var myData = hello;将无法正常工作。
马达拉的幽灵

-2

采用:

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

那会起作用。它只是分配一个JavaScript变量,然后传递现有PHP变量的值。由于PHP在此处编写JavaScript行,因此它具有PHP变量的值,可以直接传递它。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.