ฉันมีตัวแปรใน PHP และฉันต้องการค่าในโค้ด JavaScript ของฉัน ฉันจะรับตัวแปรจาก PHP เป็น JavaScript ได้อย่างไร

ฉันมีรหัสที่มีลักษณะเช่นนี้:

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

ฉันมีรหัส JavaScript ที่ต้องการvalและดูตามบรรทัดของ:

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

มีหลายวิธีในการทำเช่นนี้ บางคนต้องการค่าใช้จ่ายมากกว่าคนอื่นและบางคนคิดว่าดีกว่าคนอื่น

ในลำดับใดไม่มี:

1. ใช้ AJAX เพื่อรับข้อมูลที่คุณต้องการจากเซิร์ฟเวอร์
2. สะท้อนข้อมูลลงในหน้าบางแห่งและใช้ JavaScript เพื่อรับข้อมูลจาก DOM
3. สะท้อนข้อมูลโดยตรงกับ JavaScript

ในโพสต์นี้เราจะตรวจสอบแต่ละวิธีข้างต้นและดูข้อดีข้อเสียของแต่ละวิธีรวมถึงวิธีการนำไปใช้

1. ใช้ AJAX เพื่อรับข้อมูลที่คุณต้องการจากเซิร์ฟเวอร์

วิธีการนี้ถือว่าดีที่สุดเพราะฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์สคริปต์ของคุณจะแยกจากกันอย่างสมบูรณ์

ข้อดี

• การแยกระหว่างเลเยอร์ที่ดีขึ้น - หากพรุ่งนี้คุณหยุดใช้ PHP และต้องการย้ายไปยัง servlet, REST API หรือบริการอื่น ๆ คุณไม่จำเป็นต้องเปลี่ยนรหัส JavaScript มากนัก
• อ่านเพิ่มเติม - JavaScript คือ JavaScript, PHP คือ PHP คุณจะได้รับรหัสที่อ่านง่ายขึ้นทั้งสองภาษา
• อนุญาตให้ถ่ายโอนข้อมูลแบบอะซิงโครนัส - การรับข้อมูลจาก PHP อาจมีเวลา / ทรัพยากรแพง บางครั้งคุณไม่ต้องการรอข้อมูลโหลดหน้าเว็บและมีการเข้าถึงข้อมูลทุกครั้ง
• ไม่พบข้อมูลโดยตรงในมาร์กอัป - ซึ่งหมายความว่ามาร์กอัปของคุณจะรักษาข้อมูลเพิ่มเติมใด ๆ ไว้อย่างชัดเจนและมีเพียง JavaScript เท่านั้นที่เห็นข้อมูล

จุดด้อย

• Latency - AJAX สร้างคำขอ HTTP และคำร้องขอ HTTP ถูกส่งผ่านเครือข่ายและมีเวลาแฝงเครือข่าย
• สถานะ - ข้อมูลที่ดึงมาผ่านคำขอ HTTP แยกต่างหากจะไม่รวมข้อมูลใด ๆ จากคำขอ HTTP ที่ดึงข้อมูลเอกสาร HTML คุณอาจต้องการข้อมูลนี้ (เช่นหากเอกสาร HTML ถูกสร้างขึ้นเพื่อตอบสนองต่อการส่งแบบฟอร์ม) และถ้าคุณทำจะต้องถ่ายโอนข้ามอย่างใด หากคุณตัดการฝังข้อมูลในหน้า (ซึ่งคุณมีหากคุณใช้เทคนิคนี้) จากนั้น จำกัด คุณไว้ในคุกกี้ / เซสชันที่อาจมีเงื่อนไขการแข่งขัน

ตัวอย่างการนำไปปฏิบัติ

ด้วย 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เมื่อไฟล์โหลดเสร็จ

วัสดุการอ่านเพิ่มเติมบางอย่าง

• ใช้ XMLHttpRequest - MDN
• การอ้างอิงวัตถุ XMLHttpRequest - MDN
• ฉันจะคืนการตอบสนองจากการโทรแบบอะซิงโครนัสได้อย่างไร

2. สะท้อนข้อมูลลงในหน้าบางแห่งและใช้ JavaScript เพื่อรับข้อมูลจาก DOM

วิธีนี้เป็นวิธีที่ดีกว่าสำหรับ AJAX แต่ก็ยังมีข้อดีอยู่ มันยังค่อนข้างแยกระหว่าง PHP และ JavaScript ในแง่ที่ว่าไม่มี PHP โดยตรงใน JavaScript

ข้อดี

• ด่วน - การดำเนินงาน DOM มักจะได้อย่างรวดเร็วและคุณสามารถจัดเก็บและเข้าถึงข้อมูลเป็นจำนวนมากอย่างรวดเร็ว

จุดด้อย

• Potential Unsemantic Markup - โดยปกติแล้วสิ่งที่เกิดขึ้นคือคุณใช้การจัด<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 -->

โชคดี!

ฉันจะลองคำตอบที่ง่ายกว่านี้:

คำอธิบายของปัญหา

ก่อนอื่นให้ทำความเข้าใจกับการไหลของเหตุการณ์เมื่อมีการแสดงหน้าจากเซิร์ฟเวอร์ของเรา:

• PHP แรกถูกเรียกใช้มันสร้าง HTML ที่ให้บริการกับลูกค้า
• จากนั้น HTML จะถูกส่งไปยังไคลเอนต์หลังจาก PHP เสร็จสิ้นแล้วฉันต้องการเน้นว่าเมื่อโค้ดออกจากเซิร์ฟเวอร์ - PHP นั้นเสร็จสิ้นแล้วและไม่สามารถเข้าถึงได้อีกต่อไป
• จากนั้น HTML ที่มี JavaScript จะถึงไคลเอ็นต์ซึ่งสามารถเรียกใช้ JavaScript บน HTML นั้นได้

ดังนั้นจริงๆสิ่งหลักที่ต้องจำไว้ว่านี่คือHTTP เป็นไร้สัญชาติ เมื่อคำขอออกจากเซิร์ฟเวอร์เซิร์ฟเวอร์จะไม่สามารถแตะได้ ดังนั้นนี่เป็นตัวเลือกของเรา:

1. ส่งคำขอเพิ่มเติมจากลูกค้าหลังจากทำคำขอเริ่มต้นแล้ว
2. เข้ารหัสสิ่งที่เซิร์ฟเวอร์พูดในคำขอเริ่มต้น

โซลูชั่น

นั่นคือคำถามหลักที่คุณควรถามตัวเองคือ:

ฉันกำลังเขียนเว็บไซต์หรือแอปพลิเคชันหรือไม่

เว็บไซต์ส่วนใหญ่ใช้หน้าเว็บและเวลาในการโหลดหน้าเว็บต้องเร็วที่สุดเท่าที่จะเป็นไปได้ (ตัวอย่างเช่น - Wikipedia) แอปพลิเคชันบนเว็บนั้นมี AJAX ที่หนักกว่าและมีการเดินทางไปกลับเป็นจำนวนมากเพื่อรับข้อมูลลูกค้าอย่างรวดเร็ว (ตัวอย่างเช่นแดชบอร์ดหุ้น)

เว็บไซต์

การส่งคำขอเพิ่มเติมจากไคลเอนต์หลังจากทำคำขอเริ่มต้นช้าเนื่องจากต้องการคำขอ HTTP เพิ่มเติมซึ่งมีค่าใช้จ่ายสูง ยิ่งไปกว่านั้นมันต้องการแบบอะซิงโครนัสเนื่องจากการร้องขอ AJAX ต้องการตัวจัดการสำหรับเมื่อมันเสร็จสมบูรณ์

ฉันจะไม่แนะนำให้ทำการร้องขออื่นนอกจากว่าเว็บไซต์ของคุณเป็นแอปพลิเคชันสำหรับรับข้อมูลนั้นจากเซิร์ฟเวอร์

คุณต้องการเวลาตอบสนองที่รวดเร็วซึ่งมีผลกระทบอย่างมากต่อการแปลงและเวลาโหลด การทำคำขอ Ajax นั้นช้าสำหรับช่วงเวลาเริ่มต้นในกรณีนี้และไม่จำเป็น

คุณมีสองวิธีในการแก้ไขปัญหานี้

• ตั้งค่าคุกกี้ - คุกกี้เป็นส่วนหัวที่ส่งในคำขอ 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.

จากนั้นคุณสามารถอ่านด้วย JavaScriptโดยใช้document.cookie:

นี่คือ parser ที่ใช้มือหมุนสั้น ๆ แต่คำตอบที่ฉันเชื่อมโยงกับด้านบนมีคำทดสอบที่ดีกว่า

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.

คุกกี้เป็นข้อมูลที่ดี นี่คือสิ่งที่บริการติดตามมักจะทำ

เมื่อเรามีข้อมูลเพิ่มเติมเราสามารถเข้ารหัสมันด้วย JSON ภายในตัวแปร JavaScript แทน:

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

สมมติว่า$valueจะjson_encodeสามารถในด้าน PHP (มันมักจะเป็น) เทคนิคนี้เป็นสิ่งที่ Stack Overflow ทำกับการแชท (เช่นใช้. NET แทนที่จะเป็น PHP)

ใบสมัคร

หากคุณกำลังเขียนแอปพลิเคชัน - ทันใดนั้นความเร็วในการโหลดครั้งแรกนั้นไม่สำคัญเท่ากับประสิทธิภาพการทำงานของแอปพลิเคชั่นอย่างต่อเนื่องและมันจะเริ่มจ่ายเพื่อโหลดข้อมูลและรหัสแยกต่างหาก

คำตอบของฉันที่นี่อธิบายวิธีโหลดข้อมูลโดยใช้ AJAX ใน 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();

หรือกับ 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 ของเราจะขอข้อมูลและแสดงข้อมูลแทนที่จะขอรหัสหรือโครงร่าง สิ่งนี้สะอาดและเริ่มชำระเงินเมื่อแอปพลิเคชันเริ่มสูงขึ้น นอกจากนี้ยังแยกความกังวลได้ดีขึ้นและช่วยให้สามารถทดสอบรหัสฝั่งไคลเอ็นต์โดยไม่ต้องใช้เทคโนโลยีด้านเซิร์ฟเวอร์ใด ๆ ที่เกี่ยวข้องซึ่งเป็นข้อดีอีกข้อหนึ่ง

Postscript:คุณต้องระวังการโจมตีของเว็กเตอร์ XSS มากเมื่อคุณฉีดอะไรจาก PHP ไปยังจาวาสคริปต์ เป็นเรื่องยากมากที่จะหลีกเลี่ยงค่าที่เหมาะสมและบริบทนั้นไว หากคุณไม่แน่ใจวิธีการจัดการกับ XSS หรือไม่รู้มัน - โปรดอ่านบทความ OWASP นี้ , คนนี้และคำถามนี้

ฉันมักจะใช้ data- * คุณลักษณะใน 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>

ตัวอย่างนี้ใช้ jQuery แต่สามารถปรับให้เหมาะกับไลบรารีหรือ vanilla JavaScript อื่นได้

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติชุดข้อมูลได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

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

json_encode () ต้องการ:

• PHP 5.2.0 หรือมากกว่า
• $PHPVar เข้ารหัสเป็น UTF-8, Unicode

ใช้วิธีใดวิธีหนึ่งต่อไปนี้

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

ฉันชอบวิธีที่ 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วัตถุที่เก็บข้อมูลเพิ่มเติมซึ่งขณะนี้พร้อมใช้งานสำหรับ 'สคริปต์ที่กำหนดเอง'

ลองสิ่งนี้:

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

-

- หลังจากลองสักระยะหนึ่ง

แม้ว่ามันจะใช้งานได้ แต่มันก็ทำให้ประสิทธิภาพช้าลง PHP เป็นสคริปต์ฝั่งเซิร์ฟเวอร์ในขณะที่ JavaScript เป็นฝั่งผู้ใช้

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

มันไม่ทำงานเพราะ$valไม่ได้กำหนดเท่าที่มีการเกี่ยวข้องกับจาวาสคริปต์นั่นคือโค้ด 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

ฉันออกมาด้วยวิธีง่าย ๆ ในการกำหนดตัวแปร JavaScript โดยใช้ PHP

มันใช้คุณลักษณะข้อมูล 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");
}

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

นี่คือสิ่งที่ฉันไม่เห็นโพสต์เป็นตัวเลือก มันคล้ายกับการใช้ 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;
?>

นี่คือเคล็ดลับ:

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>

สมมุติว่าตัวแปรของคุณเป็นจำนวนเต็มเสมอ ในกรณีนี้ง่ายกว่า:

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

เอาต์พุตคอนโซล

หลังจากการวิจัยมากมายฉันพบว่าวิธีที่ง่ายที่สุดคือการส่งผ่านตัวแปรทุกชนิดได้อย่างง่ายดาย

ในสคริปต์เซิร์ฟเวอร์คุณมีตัวแปรสองตัวและคุณพยายามส่งไปยังสคริปต์ไคลเอ็นต์:

$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 ใด ๆ ของคุณที่ถูกเรียกบนหน้าเว็บเพียงเรียกตัวแปรเหล่านั้น

ฉันจะสมมติว่าข้อมูลที่จะส่งเป็นสตริง

ตามที่ผู้วิจารณ์คนอื่นระบุไว้ AJAX เป็นทางออกหนึ่งที่เป็นไปได้ แต่ข้อเสียมีมากกว่าข้อดี: มีความล่าช้าและยากต่อการเขียนโปรแกรม (ต้องการรหัสเพื่อดึงค่าทั้งเซิร์ฟเวอร์ - และฝั่งไคลเอ็นต์) เมื่อง่ายขึ้น ฟังก์ชั่นการหลบหนีควรเพียงพอ

ดังนั้นเรากลับไปหลบหนี json_encode($string)ใช้งานได้หากคุณเข้ารหัสสตริงต้นทางเป็น UTF-8 ก่อนในกรณีที่ยังไม่ได้json_encodeใช้เพราะต้องใช้ข้อมูล UTF-8 ถ้า string อยู่ในมาตรฐาน ISO-8859-1 แล้วคุณสามารถเพียงแค่ใช้json_encode(utf8_encode($string)); มิฉะนั้นคุณสามารถใช้iconvในการทำ Conversion ก่อนเสมอ

แต่ก็มี gotcha ขนาดใหญ่ หากคุณใช้งานในกิจกรรมคุณต้องเรียกใช้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>';

ตามรหัสของคุณ

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

ตอนนี้คุณสามารถรับค่าโดยใช้ DOM ใช้ InnerHTML ของ span id ในกรณีนี้คุณไม่จำเป็นต้องทำการเรียกไปยังเซิร์ฟเวอร์หรือ Ajax หรือสิ่งอื่นใด

หน้าของคุณจะพิมพ์โดยใช้ PHP และ JavaScript ของคุณจะได้รับความคุ้มค่าโดยใช้ DOM

<?php

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

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

?>

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

เอาท์พุท

แอปเปิ้ลเป็นสีเหลืองสตรอเบอร์รี่เป็นสีแดงและสีกีวีเป็นสีเขียว

สำหรับผู้ที่มีปัญหาในการใช้รหัสด้านล่างและมันยังคงแสดง<?php echo $username?>หรืออะไรเช่นนี้ไปแก้ไข httpd.conf ในส่วน mime_module โดยเพิ่ม 'AddType application / x-httpd-php .html .htm' เพราะอาจถูกปิดการใช้งาน โดยค่าเริ่มต้น.

<?php
    $username = 1;
?>

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

ใช้:

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

และนั่นจะใช้ได้ มันแค่กำหนดตัวแปร JavaScript แล้วส่งค่าของตัวแปร PHP ที่มีอยู่ เนื่องจาก PHP เขียนบรรทัด JavaScript ที่นี่จึงมีค่าของตัวแปร PHP และสามารถส่งโดยตรง