Làm cách nào để chuyển các biến và dữ liệu từ PHP sang JavaScript?

682
Madara's Ghost 2014-05-20 04:37.

Tôi có một biến trong PHP và tôi cần giá trị của nó trong mã JavaScript của mình. Làm cách nào để chuyển biến của tôi từ PHP sang JavaScript?

Tôi có mã trông như thế này:

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

Tôi có mã JavaScript cần valvà xem xét các dòng:

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

17 answers

902
Madara's Ghost 2014-05-20 04:37.

Thực tế có một số cách tiếp cận để làm điều này. Một số yêu cầu chi phí cao hơn những người khác và một số được coi là tốt hơn những người khác.

Không theo thứ tự đặc biệt:

  1. Sử dụng AJAX để lấy dữ liệu bạn cần từ máy chủ.
  2. Đưa dữ liệu vào trang ở đâu đó và sử dụng JavaScript để lấy thông tin từ DOM.
  3. Truyền dữ liệu trực tiếp sang JavaScript.

Trong bài đăng này, chúng tôi sẽ xem xét từng phương pháp ở trên và xem ưu và nhược điểm của từng phương pháp cũng như cách triển khai chúng.

1. Sử dụng AJAX để lấy dữ liệu bạn cần từ máy chủ

Phương pháp này được coi là tốt nhất, vì các tập lệnh phía máy chủ và phía máy khách của bạn hoàn toàn tách biệt .

Ưu điểm

  • Phân tách tốt hơn giữa các lớp - Nếu ngày mai bạn ngừng sử dụng PHP và muốn chuyển sang một servlet, một API REST hoặc một số dịch vụ khác, bạn không phải thay đổi nhiều mã JavaScript.
  • Dễ đọc hơn - JavaScript là JavaScript, PHP là PHP. Không trộn lẫn cả hai, bạn sẽ có được nhiều mã dễ đọc hơn trên cả hai ngôn ngữ.
  • Cho phép truyền dữ liệu không đồng bộ - Lấy thông tin từ PHP có thể tốn kém thời gian / tài nguyên. Đôi khi bạn không muốn đợi thông tin, tải trang và có thông tin đến bất cứ khi nào.
  • Dữ liệu không được tìm thấy trực tiếp trên đánh dấu - Điều này có nghĩa là đánh dấu của bạn được giữ sạch khỏi mọi dữ liệu bổ sung và chỉ JavaScript mới nhìn thấy nó.

Nhược điểm

  • Độ trễ - AJAX tạo một yêu cầu HTTP và các yêu cầu HTTP được chuyển qua mạng và có độ trễ mạng.
  • Trạng thái - Dữ liệu được tìm nạp qua một yêu cầu HTTP riêng biệt sẽ không bao gồm bất kỳ thông tin nào từ yêu cầu HTTP đã tìm nạp tài liệu HTML. Bạn có thể cần thông tin này (ví dụ: nếu tài liệu HTML được tạo để phản hồi cho việc gửi biểu mẫu) và nếu bạn làm vậy, bạn sẽ phải chuyển nó qua bằng cách nào đó. Nếu bạn đã loại trừ việc nhúng dữ liệu vào trang (mà bạn có nếu bạn đang sử dụng kỹ thuật này) thì điều đó sẽ giới hạn bạn trong các cookie / phiên có thể tùy thuộc vào điều kiện chủng tộc.

Ví dụ triển khai

Với AJAX, bạn cần hai trang, một là nơi PHP tạo đầu ra và trang thứ hai là nơi JavaScript lấy đầu ra đó:

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 (hoặc bất kỳ trang thực tế nào được đặt tên như vậy)

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

Sự kết hợp trên của hai tệp sẽ cảnh báo 42khi tệp tải xong.

Một số tài liệu đọc thêm

2. Đưa dữ liệu vào trang ở đâu đó và sử dụng JavaScript để lấy thông tin từ DOM

Phương pháp này ít được ưa chuộng hơn AJAX, nhưng nó vẫn có những ưu điểm của nó. Nó vẫn tương đối tách biệt giữa PHP và JavaScript theo nghĩa là không có PHP trực tiếp trong JavaScript.

Ưu điểm

  • Nhanh - Hoạt động của DOM thường nhanh chóng và bạn có thể lưu trữ và truy cập nhiều dữ liệu tương đối nhanh chóng.

Nhược điểm

  • Đánh dấu tiềm ẩn không có nghĩa - Thông thường, điều xảy ra là bạn sử dụng một số loại <input type=hidden>để lưu trữ thông tin, bởi vì việc lấy thông tin ra sẽ dễ dàng hơn inputNode.value, nhưng làm như vậy có nghĩa là bạn có một phần tử vô nghĩa trong HTML của mình. HTML có <meta>phần tử cho dữ liệu về tài liệu và HTML 5 giới thiệu data-*các thuộc tính cho dữ liệu dành riêng cho việc đọc bằng JavaScript có thể được liên kết với các phần tử cụ thể.
  • Dirties up the Source - Dữ liệu mà PHP tạo ra được xuất trực tiếp đến nguồn HTML, có nghĩa là bạn sẽ có được một nguồn HTML lớn hơn và ít tập trung hơn.
  • Khó lấy dữ liệu có cấu trúc hơn - Dữ liệu có cấu trúc sẽ phải là HTML hợp lệ, nếu không bạn sẽ phải tự thoát và chuyển đổi các chuỗi.
  • Kết hợp chặt chẽ PHP với logic dữ liệu của bạn - Bởi vì PHP được sử dụng trong bản trình bày, bạn không thể tách biệt cả hai một cách rõ ràng.

Ví dụ triển khai

Với điều này, ý tưởng là tạo ra một số loại phần tử sẽ không được hiển thị cho người dùng, nhưng hiển thị với 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. Truyền dữ liệu trực tiếp sang JavaScript

Đây có lẽ là điều dễ hiểu nhất.

Ưu điểm

  • Rất dễ dàng thực hiện - Chỉ mất rất ít để thực hiện điều này và hiểu.
  • Không làm bẩn nguồn - Các biến được xuất trực tiếp sang JavaScript, vì vậy DOM không bị ảnh hưởng.

Nhược điểm

  • Kết hợp chặt chẽ PHP với logic dữ liệu của bạn - Bởi vì PHP được sử dụng trong bản trình bày, bạn không thể tách biệt cả hai một cách rõ ràng.

Ví dụ triển khai

Việc triển khai tương đối đơn giản:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

Chúc may mắn!

93
Benjamin Gruenbaum 2014-05-20 05:02.

Tôi sẽ thử một câu trả lời đơn giản hơn:

Giải thích vấn đề

Trước tiên, hãy hiểu luồng sự kiện khi một trang được phân phát từ máy chủ của chúng tôi:

  • PHP đầu tiên được chạy, nó tạo ra HTML được cung cấp cho máy khách.
  • Sau đó, HTML được chuyển đến máy khách, sau khi PHP được thực hiện xong, tôi muốn nhấn mạnh rằng một khi mã rời khỏi máy chủ - PHP được xử lý xong và không thể truy cập được nữa.
  • Sau đó, HTML có JavaScript đến máy khách, có thể thực thi JavaScript trên HTML đó.

Vì vậy, thực sự, điều cốt lõi cần nhớ ở đây là HTTP là không trạng thái . Khi một yêu cầu rời khỏi máy chủ, máy chủ không thể chạm vào nó. Vì vậy, các tùy chọn của chúng tôi là:

  1. Gửi thêm yêu cầu từ máy khách sau khi yêu cầu ban đầu được thực hiện.
  2. Mã hóa những gì máy chủ phải nói trong yêu cầu ban đầu.

Các giải pháp

Đó là câu hỏi cốt lõi mà bạn nên tự hỏi mình là:

Tôi đang viết một trang web hay một ứng dụng?

Các trang web chủ yếu dựa trên trang và thời gian tải trang cần phải nhanh nhất có thể (ví dụ - Wikipedia). Các ứng dụng web nặng AJAX hơn và thực hiện nhiều chuyến đi vòng quanh để lấy thông tin nhanh về khách hàng (ví dụ - bảng điều khiển chứng khoán).

Trang mạng

Việc gửi thêm yêu cầu từ máy khách sau khi yêu cầu ban đầu được thực hiện chậm vì nó đòi hỏi nhiều yêu cầu HTTP hơn có chi phí đáng kể. Hơn nữa, nó yêu cầu tính không đồng bộ vì việc thực hiện một yêu cầu AJAX cần một trình xử lý khi nó hoàn tất.

Tôi không khuyên bạn nên thực hiện một yêu cầu khác trừ khi trang web của bạn là ứng dụng để lấy thông tin đó từ máy chủ.

Bạn muốn thời gian phản hồi nhanh có tác động rất lớn đến thời gian tải và chuyển đổi. Trong trường hợp này, việc thực hiện các yêu cầu Ajax là chậm đối với thời gian hoạt động ban đầu và không cần thiết.

Bạn có hai cách để giải quyết vấn đề

  • Đặt cookie - cookie là tiêu đề được gửi trong các yêu cầu HTTP mà cả máy chủ và máy khách đều có thể đọc.
  • Mã hóa biến dưới dạng JSON - JSON trông rất gần với các đối tượng JavaScript và hầu hết các đối tượng JSON là các biến JavaScript hợp lệ.

Đặt cookie thực sự không khó lắm, bạn chỉ cần gán cho nó một giá trị:

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

Sau đó, bạn có thể Hàm ngắn nhất để đọc cookie theo tên trong JavaScript là gì? bằng cách sử dụng document.cookie:

Đây là một trình phân tích cú pháp ngắn gọn được cuộn tay, nhưng câu trả lời mà tôi đã liên kết đến ngay trên đây có những câu trả lời đã được thử nghiệm tốt hơn:

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 tốt cho một ít dữ liệu. Đây là điều mà các dịch vụ theo dõi thường làm.

Sau khi có nhiều dữ liệu hơn, chúng tôi có thể mã hóa nó bằng JSON bên trong một biến JavaScript:

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

Giả sử $valuejson_encodecó thể ở phía PHP (thường là như vậy). Kỹ thuật này là những gì Stack Overflow thực hiện với trò chuyện của nó chẳng hạn (chỉ sử dụng .NET thay vì PHP).

Ứng dụng

Nếu bạn đang viết một ứng dụng - đột nhiên thời gian tải ban đầu không phải lúc nào cũng quan trọng bằng hiệu suất liên tục của ứng dụng và nó bắt đầu có lợi khi tải dữ liệu và mã riêng biệt.

Câu trả lời của tôi Làm cách nào để trả lại phản hồi từ cuộc gọi không đồng bộ? giải thích cách tải dữ liệu bằng AJAX trong JavaScript:

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

Hoặc với jQuery:

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

Bây giờ, máy chủ chỉ cần chứa một /your/urltuyến / tệp chứa mã lấy dữ liệu và thực hiện điều gì đó với nó, trong trường hợp của bạn:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

Bằng cách này, tệp JavaScript của chúng tôi yêu cầu dữ liệu và hiển thị dữ liệu đó thay vì yêu cầu mã hoặc bố cục. Điều này rõ ràng hơn và bắt đầu mang lại hiệu quả khi ứng dụng trở nên cao hơn. Nó cũng tách biệt các mối quan tâm tốt hơn và nó cho phép kiểm tra mã phía máy khách mà không cần bất kỳ công nghệ phía máy chủ nào liên quan, đây là một điểm cộng khác.

Postscript: Bạn phải rất ý thức về vectơ tấn công XSS khi bạn tiêm bất cứ điều gì từ PHP sang JavaScript. Đó là rất khó khăn để thoát khỏi các giá trị đúng và đó là bối cảnh nhạy cảm. Nếu bạn không chắc chắn về cách đối phó với XSS hoặc không biết về nó - vui lòng đọc bài viết OWASP này , bài báo nàyCác phương pháp hay nhất để tránh các cuộc tấn công xss trong một trang web PHP là gì .

91
yuikonnu 2014-05-23 07:14.

Tôi thường sử dụng thuộc tính data- * trong HTML.

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

Ví dụ này sử dụng jQuery, nhưng nó có thể được điều chỉnh cho một thư viện khác hoặc JavaScript vani.

Bạn có thể đọc thêm về thuộc tính tập dữ liệu tại đây: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

39
Jessé Catrinck 2014-07-19 12:00.
<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode () yêu cầu:

  • PHP 5.2.0 trở lên
  • $PHPVar được mã hóa dưới dạng UTF-8, Unicode.
25
Nishant Mendiratta 2015-04-14 08:59.

Đơn giản chỉ cần sử dụng một trong các phương pháp sau.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

HOẶC LÀ

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>
12
Danijel 2014-10-30 10:24.

Tôi khá thích cách WordPress hoạt động với các chức năng enqueuelocalize của nó, vì vậy theo mô hình đó, tôi đã viết một lớp đơn giản để đưa các tập lệnh vào trang theo các phụ thuộc tập lệnh và để cung cấp thêm dữ liệu cho tập lệnh.

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

Lệnh gọi enqueue_script()hàm là để thêm tập lệnh, thiết lập nguồn và phần phụ thuộc vào các tập lệnh khác cũng như dữ liệu bổ sung cần thiết cho tập lệnh.

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

Và, print_scripts()phương thức của ví dụ trên sẽ gửi kết quả này:

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

Bất kể thực tế là tập lệnh 'jquery' được xếp sau 'jquery-ui', nó được in trước đó vì nó được định nghĩa trong 'jquery-ui' mà nó phụ thuộc vào 'jquery'. Dữ liệu bổ sung cho 'tập lệnh tùy chỉnh' nằm bên trong một khối tập lệnh mới và được đặt trước nó, nó chứa mydatađối tượng chứa dữ liệu bổ sung, hiện có sẵn cho 'tập lệnh tùy chỉnh'.

11
Yosra Nagati 2014-09-03 00:04.

Thử đi:

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

-

-Sau khi thử cái này một lúc

Mặc dù nó hoạt động, tuy nhiên nó làm chậm hiệu suất. Vì PHP là tập lệnh phía máy chủ trong khi JavaScript là phía người dùng.

8
andrew 2014-05-20 05:20.
myPlugin.start($val); // Tried this, didn't work

Nó không hoạt động vì $valkhông được xác định theo như JavaScript có liên quan, tức là mã PHP không xuất ra bất kỳ thứ gì $val. Hãy thử xem nguồn trong trình duyệt của bạn và đây là những gì bạn sẽ thấy:

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

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

Điều này không hiệu quả vì PHP sẽ cố gắng coi nó myPluginnhư một hằng số và khi thất bại, nó sẽ cố gắng coi nó như một chuỗi 'myPlugin'mà nó sẽ cố gắng nối với đầu ra của hàm PHP start()và vì điều đó không được xác định nên nó sẽ tạo ra một lỗi.

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

Mặc dù điều này có nhiều khả năng hoạt động, vì mã PHP đang tạo ra JavaScript hợp lệ với các đối số mong đợi, nếu nó không thành công, rất có thể là do myPluginchưa sẵn sàng. Kiểm tra thứ tự thực hiện của bạn.

Ngoài ra, bạn cần lưu ý rằng đầu ra mã PHP không an toàn và nên được lọc bằng json_encode().

BIÊN TẬP

Vì tôi không nhận thấy dấu ngoặc đơn bị thiếu trong myPlugin.start(<?=$val?>: - \

Như @Second Rikudo đã chỉ ra, để nó hoạt động chính xác $valsẽ cần phải chứa dấu ngoặc đơn đóng, ví dụ:$val="42);"

Có nghĩa là PHP bây giờ sẽ sản xuất myPlugin.start(42);và sẽ hoạt động như mong đợi khi được mã JavaScript thực thi.

8
qnimate 2015-01-20 05:04.

Tôi đã đưa ra một phương pháp dễ dàng để gán các biến JavaScript bằng PHP.

Nó sử dụng các thuộc tính dữ liệu HTML5 để lưu trữ các biến PHP và sau đó nó được gán cho JavaScript khi tải trang.

Một hướng dẫn đầy đủ có thể được tìm thấy ở đây .

Thí dụ:

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

Đây là mã 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");
}
6
DeV 2018-07-20 02:15.
  1. Chuyển đổi dữ liệu thành JSON
  2. Gọi AJAX để nhận tệp JSON
  3. Chuyển đổi JSON thành đối tượng Javascript

Thí dụ:

BƯỚC 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();
?>

BƯỚC 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);
      }
   }
}
6
aequalsb 2015-05-19 10:12.

Đây là một trong những tôi không thấy được đăng dưới dạng tùy chọn. Nó tương tự như sử dụng Ajax, nhưng rõ ràng là khác nhau.

Đầu tiên, đặt nguồn của tập lệnh trực tiếp thành tệp PHP.

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

Bạn thậm chí có thể chuyển một biến trở lại tệp PHP, chẳng hạn như ví dụ sau:

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

Sau đó, trong "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;
?>
4
Ramin Taghizada 2017-07-14 05:36.

Đây là thủ thuật:

  1. Đây là 'PHP' của bạn để sử dụng biến đó:

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
    
  2. Bây giờ bạn có một biến JavaScript được gọi 'name'và đây là mã JavaScript của bạn để sử dụng biến đó:

    <script>
         console.log("I am everywhere " + name);
    </script>
    
3
Supun Praneeth 2018-07-09 04:52.

Giả sử biến của bạn luôn là số nguyên. Trong trường hợp đó, điều này dễ dàng hơn:

<?PHP
    $number = 4;

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

Đầu ra :

<script>var number = 4;alert(number);</script>

Giả sử biến của bạn không phải là số nguyên, nhưng nếu bạn thử phương pháp trên, bạn sẽ nhận được một cái gì đó như sau:

<script>var number = abcd;alert(number);</script>

Nhưng trong JavaScript, đây là một lỗi cú pháp.

Vì vậy, trong PHP chúng ta có một lệnh gọi hàm json_encodemã hóa chuỗi thành một đối tượng JSON.

<?PHP
    $number = 'abcd';

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

abcdtrong JSON "abcd", nó trông giống như sau:

<script>var number = "abcd";alert(number);</script>

Bạn có thể sử dụng cùng một phương pháp cho các mảng:

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

Và mã JavaScript của bạn trông giống như sau:

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

Đầu ra bảng điều khiển

2
Max 2018-08-30 22:59.

Sau nhiều nghiên cứu, tôi thấy phương pháp dễ nhất là vượt qua tất cả các loại biến một cách dễ dàng.

Trong tập lệnh máy chủ, bạn có hai biến và bạn đang cố gắng gửi chúng tới tập lệnh máy khách:

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

Trong bất kỳ mã JavaScript nào của bạn được gọi trên trang, chỉ cần gọi các biến đó.

1
Pedro Gimeno 2016-06-06 07:44.

Tôi sẽ giả định rằng dữ liệu cần truyền là một chuỗi.

Như những người bình luận khác đã nói, AJAX là một giải pháp khả thi, nhưng nhược điểm nhiều hơn ưu điểm: nó có độ trễ và khó lập trình hơn (nó cần mã để truy xuất giá trị cả phía máy chủ và phía máy khách), khi đơn giản hơn chức năng thoát nên đủ.

Vì vậy, chúng tôi quay trở lại để trốn thoát. json_encode($string)hoạt động nếu bạn mã hóa chuỗi nguồn dưới dạng UTF-8 trước trong trường hợp chưa có, vì json_encodeyêu cầu dữ liệu UTF-8. Nếu chuỗi ở ISO-8859-1 thì bạn có thể chỉ cần sử dụng json_encode(utf8_encode($string)); nếu không, bạn luôn có thể sử dụng iconvđể thực hiện chuyển đổi trước.

Nhưng có một gotcha lớn. Nếu bạn đang sử dụng nó trong các sự kiện, bạn cần chạy htmlspecialchars()trên kết quả để làm cho nó đúng mã. Và sau đó, bạn phải cẩn thận sử dụng dấu ngoặc kép để kèm theo sự kiện hoặc luôn thêm ENT_QUOTESvào htmlspecialchars. Ví dụ:

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

Tuy nhiên, bạn không thể sử dụng htmlspecialcharsmã JavaScript thông thường (mã nằm trong <script>... </script>thẻ). Điều đó làm cho việc sử dụng hàm này dễ bị nhầm lẫn, do quên htmlspecialcharskết quả khi viết mã sự kiện.

Có thể viết một hàm không gặp vấn đề đó và có thể được sử dụng cả trong các sự kiện và trong mã JavaScript thông thường, miễn là bạn luôn đặt các sự kiện của mình trong dấu ngoặc kép hoặc luôn trong dấu ngoặc kép. Đây là đề xuất của tôi, yêu cầu chúng phải được đặt trong dấu ngoặc kép (mà tôi thích):

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

Hàm yêu cầu PHP 5.4+. Ví dụ sử dụng:

<?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
Amit Shah 2015-04-16 01:14.

Theo mã của bạn

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

Bây giờ bạn có thể nhận giá trị bằng cách sử dụng DOM, sử dụng innerHTML của span id, trong trường hợp này, bạn không cần thực hiện bất kỳ lệnh gọi nào tới máy chủ, Ajax hoặc một thứ khác.

Trang của bạn sẽ in nó bằng PHP và JavaScript của bạn sẽ nhận được giá trị bằng cách sử dụng DOM.

0
antelove 2019-08-15 06:37.
<?php

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

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

?>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language