Web 元件使用 POST 和 GET 的傳值方式

在 App Inventor 中，有一個網路(Web)元件，可用於發送 HTTP 的 GET、POST、PUT 及 DELETE 請求。
網路元件屬於非可視元件。以下將分別使用 POST 和 GET 的傳值方式，實際將值傳送給 PHP 程式，最後再將結果返回顯示在 App 中。

首先建立一個新專案「WebTest」

1. 從「元件面板」的「介面配置」，拉兩個「垂直配置」到「工作面板」。
2. 兩個「垂直配置」區域各自放兩個「標籤元件」和一個「按鈕元件」。
3. 最後再從「元件面板」的「通訊」，拉兩個「網路元件」到「工作面板」。
4. 請修改各個元件的屬性，如下圖所示。

切換到「程式設計」區域，開始來撰寫程式。

功能設計：

此 App 的功能主要設計為，當使用者按下 GET 或 POST 的按鈕時，就將「網路元件」的路徑設定為我們等會兒所撰寫的 PHP 程式，並且要讓「網路元件」執行 POST 或 GET 的請求。

1. 從最左方的「方塊」區選擇 「POST 的按鈕元件」，將第一個方塊「當按鈕被點選時執行…」拖拉至旁邊的「工作面板」。
2. 接著選擇「POST 的網路元件」，將設定網址的方塊拉至剛剛拖拉的方塊裡面；右邊要放置一個「字串方塊」，字串裡要填入我們 PHP 程式的路徑位置。這裡可以先用我的「https://jbprogramnotes.com/Program/AppInventor/PHPFiles/postTest.php」。
3. 最後再選擇一次「POST 的網路元件」，將呼叫執行 POST 文字請求的方塊，拖拉到剛剛方塊的下方，右邊也要放置一個「字串方塊」，內容請輸入「post=這是以 POST 傳值的使用方式」。
4. 完成後如下圖所示。

當「網路元件」取得文字後，將 POST 的標籤設定為回應的內容。

1. 選擇「POST 的網路元件」，將「當 POST 網路元件取得文字」的方塊拖拉出來。
2. 接著要將 POST 標籤的文字內容，設定為網路元件的回應內容。
3. 如下圖所示。

GET 的做法大致上跟 POST 一樣，只是在設定網址的時候，要在網址最後面加個問號，並將要代入的參數名稱和內容填進去，請參考下圖。「https://jbprogramnotes.com/Program/AppInventor/PHPFiles/getTest.php?get=這是以 GET 傳值的使用方式」

接著要撰寫 PHP 程式，POST 和 GET 大同小異，只有短短三行的程式碼。

POST 寫法：

<?php
echo $_POST[‘post’];
?>

GET 寫法：

<?php
echo $_GET[‘get’];
?>

可用記事本撰寫，存檔時副檔名請填 php，編碼選擇 UTF-8 不帶簽名。

完整程式碼

App 執行畫面

---

如果覺得文章內容還不錯的話，麻煩請幫我點個讚！感謝

可以多點幾次喔~~

第一次點讚需使用 Google 或 Facebook 帳號註冊