(舊資料，參考) 從後端 PHP 傳遞資料到網頁端 JavaScript
PHP在整個月曆的APP中，唯一執行於後端伺服器的元素，其存在的目的就是存取後端伺服器的資源，最常見的，即是資料庫。上一個階段，透過http協定的get與post方法，將資料由前端傳遞給後端的php程式碼。在傳統的php環境，是由php直接產生一個靜態的網頁文件，如果需要更新網頁，必須要再執行php程式來產生一次新的網頁文件。
加入JavaScript元素的網頁，本身即有能力進行網頁的更新，有些網頁資料的更新是不需要進行資料庫的資料存取，像我們這個月曆App，變化色彩、月份的變更顯示，不需要存取後端資料庫，只有在資料需要永久儲存時，我們才會將資料寫入資料庫(上一個部份學習到的)，這部份資料由前端到後端透過POST/GET完成，但是後端到前端就沒有POST/GET方法可用了。
後端要傳遞資料給前端JavaScript，就是將資料包裝JavaScript的資料格式，也就是var，而資料則有簡單資料、陣列資料、物件資料，簡單的資料傳遞可以如下實現：
接著，我們進行最後2個功能：儲存色彩與記事資料的處理。 在php程式碼段中加入新的函式，此函式查詢theme這個資料表格(只有一列資料)，回傳cur_theme欄位的值 (記錄的色彩名稱)。
儲存於資料庫表格notes記事資料的處理：
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
~~結束
參考資料：Passing data from PHP to JavaScript