來自Javascript的PHP方法調用未顯示在Wordpress源中

Question

我正在運行Wordpress網站，並嘗試從我的Javascript代碼調用PHP方法。

點擊按鈕時，將saverFoo() Javascript方法，並嘗試調用PHP方法save_image_data() 。

      function saverFoo() {
        var dataURL = canvas.toDataURL();
        <?php echo save_image_data(dataURL); ?>;
      }

      function loaderFoo() {  
        var loadedImage = <?php echo loadimagedata(); ?>;
        console.log(loadedImage);
      }

PHP方法的實現位於function.php文件中，並且只是試圖將一些圖像數據（dataURL）保存在用戶的meta中

    function save_image_data($imageData) {
       global $current_user;
       update_user_meta( $current_user->ID, 'user_design', $_POST['$imageData']);
    } 

     function loadimagedata() {
       global $current_user;
       $old_notes = get_user_meta($current_user->ID, 'user_design', true);
       return $old_notes;
     } 

在Chrome中檢查我的網頁時，顯示了一個空白空間，當我嘗試對其進行記錄時， loaderFoo () （javascript）應該調用loadimagedata() （php），而loadedImage是未定義的變量，例如：

      function loaderFoo() {  
        var loadedImage = ;
        console.log(loadedImage);
      }

不知道我在這里犯了什么根本性的錯誤。

Answer 1

PHP不能那樣工作。 它是一個預處理器。 它都是在服務器端運行和完成的，生成的text / html / binary數據/所有內容都發送給客戶端。 對於text/html內容類型，瀏覽器將加載，解析，渲染並運行任何javascript。

像這樣在線內混合使用PHP和JavaScript的方法是使用PHP來填充變量。 例如

alert("<?php print($_SERVER['SCRIPT_FILENAME']); ?>");

會起作用，因為客戶會看到

alert("/path/to/foo.php");

並為用戶呈現。

要使用JavaScript與PHP進行真正的交互，您需要研究使用基於HTTP的REST類型服務以及也許是Angular，Vue等各種流行工具集之一。

Answer 2

永遠記住，PHP在服務器端運行，而javascript在客戶端運行。 因此，我們在這里有一個命令，服務器收到請求PHP處理它應處理的內容並呈現頁面，只有Javascript會在這里執行。

在此示例中，當執行'saverFoo（）'函數時，此函數<? Php echo save_image_data (dataURL); ?>; <? Php echo save_image_data (dataURL); ?>; 已經寫在頁面上。 PHP無法以這種方式獲取dataURL變量中包含的信息。 為此，我們必須使用所需的信息向服務器發出請求，但是使用“圖像”並不是一件容易的事，因為在使用常規String字段時，帖子的大小受到限制。

function saverFoo () {
    var dataURL = canvas.toDataURL ();
    <? php echo save_image_data (dataURL); ?>;
}