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

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

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

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

  1. 從「元件面板」的「介面配置」,拉兩個「垂直配置」到「工作面板」。
  2. 兩個「垂直配置」區域各自放兩個「標籤元件」和一個「按鈕元件」。
  3. 最後再從「元件面板」的「通訊」,拉兩個「網路元件」到「工作面板」。
  4. 請修改各個元件的屬性,如下圖所示。
請將結果標籤的文字設定成:「結果:\n」。
p.s. \n 是換行的意思。

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

功能設計:

此 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 不帶簽名。


完整程式碼

專案「WebTest」完整程式碼

App 執行畫面




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

可以多點幾次喔~~

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

發表迴響