(舊資料,參考) 從後端 PHP 傳遞資料到網頁端 JavaScript
PHP在整個月曆的APP中,唯一執行於後端伺服器的元素,其存在的目的就是存取後端伺服器的資源,最常見的,即是資料庫。上一個階段,透過http協定的get與post方法,將資料由前端傳遞給後端的php程式碼。在傳統的php環境,是由php直接產生一個靜態的網頁文件,如果需要更新網頁,必須要再執行php程式來產生一次新的網頁文件。
加入JavaScript元素的網頁,本身即有能力進行網頁的更新,有些網頁資料的更新是不需要進行資料庫的資料存取,像我們這個月曆App,變化色彩、月份的變更顯示,不需要存取後端資料庫,只有在資料需要永久儲存時,我們才會將資料寫入資料庫(上一個部份學習到的),這部份資料由前端到後端透過POST/GET完成,但是後端到前端就沒有POST/GET方法可用了。
後端要傳遞資料給前端JavaScript,就是將資料包裝JavaScript的資料格式,也就是var,而資料則有簡單資料、陣列資料、物件資料,簡單的資料傳遞可以如下實現:
var val = "<?php echo $val ?>";
一個完整的例子:
<?php $bool = false; $num = 3 + 4; $str = "A string here"; ?> <script type="text/javascript"> // boolean outputs "" if false, "1" if true var bool = "<?php echo $bool ?>"; // numeric value, both with and without quotes var num = <?php echo $num ?>; // 7 var str_num = "<?php echo $num ?>"; // "7" (a string) var str = "<?php echo $str ?>"; // "A string here" </script>
另外,對於較複雜的陣列或物件資料(簡單資料也包含在內),可用json_encode來處理,例子如下:
$name = 'Bob Marley'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; $shirt = array( 'color' => 'blue', 'number' => 23, 'size' => 'XL' ); echo '<script>'; echo 'var shirt = ' . json_encode($shirt) . ';'; echo '</script>'; //輸出會是:<script>var shirt = {"color":"blue","number":23,"size":"XL"}</script>
如果不想輸出成一行,可以用以下的方式:
<?php $name = 'Bob Marley'; echo '<script>'."rn"; echo 'var name = ' . json_encode($name) . ';'."rn"; echo '</script>'."rn"; $shirt = array( 'color' => 'blue', 'number' => 23, 'size' => 'XL' ); echo '<script>'."rn"; echo 'var shirt = ' . json_encode($shirt) . ';'."rn"; echo '</script>'."rn"; ?>
其輸出會是:
<script> var shirt = { "color": "blue", "number": 1000, "size": "XL" }; </script>
接著,我們進行最後2個功能:儲存色彩與記事資料的處理。
在php程式碼段中加入新的函式,此函式查詢theme這個資料表格(只有一列資料),回傳cur_theme欄位的值 (記錄的色彩名稱)。
function setTheme(){ global $connection; $query = "SELECT * FROM theme"; $result = mysqli_query($connection, $query); if(!$result){ die("Something went wrong.. derp"); } while($row = mysqli_fetch_assoc($result)){ return $row['cur_theme']; } }
我們把ajax與objectToString二個函式整理至js/ajax.js
底下為JavaScript碼,我們把透過php呼叫setTheme方法傳回來的色彩名稱用js_encode轉換JavaScript的格式,之後用echo的方式將色彩字串寫入html文件中 (整合進html文件),此時可按檢視原始碼來觀察瀏覽器所看到的網頁資料(php->html)。
<script src="js/updateData.js"></script> <script src="js/changeTheme.js"></script> <script src="js/postIts.js"></script> <script src="js/ajax.js"></script> <script language="JavaScript"> updateData(); //更新日期相關資料,預計改個名字,預叫buildCalendar,比較貼切! currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON字串,指定給currentColor.name changeColor();//變更月曆色彩 </script>
目前的程式:Part-10-1
儲存於資料庫表格notes記事資料的處理:
function getNoteData(){ global $connection; $query = "SELECT * FROM notes"; $result = mysqli_query($connection, $query); if(!$result){ die("Something went wrong on line 66"); } $id = 0; $color = 1; $text = ""; while($row = mysqli_fetch_assoc($result)){ $id = $row['note_id']; $color = $row['note_color']; $text = $row['note_text']; //以上為php碼 ?> <script type="text/javascript"> postIt = { id: <?php echo json_encode($id); ?>, note_num: <?php echo json_encode($color); ?>, note: <?php echo json_encode($text); ?> } postIts.push(postIt); </script> <?php //再接著php碼,這種寫法在混合式的php、html、JavaScript很常見的寫法,要習慣。 } }
script碼段:
<script src="js/updateData.js"></script> <script src="js/changeTheme.js"></script> <script src="js/postIts.js"></script> <script src="js/ajax.js"></script> <!-- 呼叫getNoteData,抓出資料庫裏的notes表格裏的記事資料,產生postIt與postIts的script敘述,以建立postIts記事資料陣列,再由後面的updateData函式進行月曆表格的建立。 --> <?php getNoteData(); ?> <script language="JavaScript"> updateData(); //更新日期相關資料,預計改個名字,預叫buildCalendar,比較貼切! currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON字串,指定給currentColor.name changeColor();//變更月曆色彩 </script>
上面的程式碼,用檢視網頁原始碼來看php產生了那些網頁html與js敘述。
從後端取得資料丟給前端網頁,中間穿插了php、JavaScript …,不是很容易看得懂。
目前的程式:Part 10-2
~~結束