[教學]如何在Flex中透過HTTPService和PHP傳送、接收表單值？

發表時間： 2009-12-08

先前已經大致上介紹Flex的外觀設計該怎處理後，接下來我們就要進行後端的程式碼部分，否則你的Flex可能只有外觀而毫無作用。Flex要輸入程式碼的部份，首先要導入一些函數，就像Java一樣，在開頭的部份需要import一些東西，才能使用特定功能。

因為PHP比較簡單，所以就利用Flex結合PHP並且透過HTTPService來接收表單的值，然後在回傳到Flex中並顯示出來，當然這部份教學，梅干大師已經寫過了，不過為了延續先前的教學，就再寫一下，這樣感覺比較有一體成型的FU。

在處理Flex透過PHP傳送與接收表單值之前，首先要確定已經完成好Flex表單雛型，接下來我們要替各個表單內的元件設定名稱，當名稱命名完成後，這就表示每一個表單內的物件都有名稱，之後透過Form傳值時，PHP在接收的時候才會知道哪一個值是由哪一個表單物件所傳出來的，最後才能做PHP端的運算，產生出正確的結果，當然命名個物件欄位名稱時，要小心Flex的保留字，像是「class」就是保留字囉！

第1步 首先在Flex中，設計區塊請切換到「Design」，接著將滑鼠點在物件上，例如點在「ComboBox」(其它的請依此類推)，但千萬別連同前面的Lable一起選取，不然會出問題。選取好後，切換到右下方的區塊，找到「Common」中的「ID」，在ID內請輸入你要定義的名稱，請小心保留字。

第2步 如果你都將各欄位的ID輸入好後，切換到「Source」介面中，可以看到在「ComboBox」或是「TextInput」等等之中多了一個id，這就表示新增正確囉！

第3步 接下來我們要輸入一些Script語法，透過Script語法來處理表單內的值，大概在程式碼第二行後加入一串語法，當然語法裡面要做一些修正，否則欄位對應會有問題。

找到

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

在下方加上以下語法：

<mx:Script>
          <![CDATA[
              import flash.events.MouseEvent;    //監聽滑鼠發生的事件
              import mx.controls.Alert;        //使用Alert             
              import mx.rpc.events.ResultEvent;//遠端程式呼叫資料
              private const NL:String = "\r";    //換行
              private function button_click(event:MouseEvent):void
                 {                   

                    var obj:Object = new Object();
                    obj.year = this.year.text;
                    obj.semester = this.semester.text;
                    obj.teacher_id = this.teacher_id.text;
                    obj.teacher_name = this.teacher_name.text;
                    obj.major = this.major.text;
                    obj.grade = this.grade.text;
                    obj.course_id = this.course_id.text;
                    obj.class_no = this.class_no.text;
                    obj.day = this.day.text;
                    obj.course_name = this.course_name.text;
                    this.phpflex.send(obj);//最後用send()的方法將資料傳出去                                           
                  }//end buttonclick
             private function resulthandler(event:ResultEvent):void{
                        mx.controls.Alert.show(event.result.toString(),"Resonse Info");
                }
          ]]>
      </mx:Script>

其中的語法「obj.year = this.year.text;」，裡面的「year」是裡的欄位ID，請依照您的欄位ID輸入，有幾個欄位ID就要有幾串該語法。其它的語法就請大家自行研究看看囉！

第4步 接著請在剛剛的「</mx:Script>」後方加入我們要使用的傳值方法的語法，我們要透過「HTTPService」來聯繫PHP並能傳值與接收值。在語法中，有一個「id =”phpflex“」其中的「phpflex」名稱必須和前面的Script語法「this.phpflex.send(obj);」中的「phpflex」相對應。

而「url=”http://127.0.0.1/flex.php”」這個則是我們待會要建立的PHP檔案，是個用來接收表單值與回傳值的PHP檔案，至於檔案路徑您可以隨意變更，但請確保可以正確連線，否則一樣無法接收與傳送值。至於「method=”POST“」這則是說明傳送方法透過「POST」方式來傳送表單內的值。

<mx:HTTPService         
        id ="phpflex"
        url="http://127.0.0.1/flex.php"
        method="POST"
        resultFormat="text"
        result="resulthandler(event)"
        />

第5步 接著請開啟純文字文件並輸入以下語法，然後將此檔案儲存成「flex.php」並且放在伺服器的根目錄。您可自定義檔案名稱與放置的路徑，若有變動的話，要與第4步語法中的「url=”http://127.0.0.1/flex.php”」相對應。

<?php
  $year = $_POST["year"];                    //學年
  $semester = $_POST["semester"];            //學期
  $teacher_id = $_POST["teacher_id"];        //教師代碼
  $teacher_name = $_POST["teacher_name"];    //教師姓名
  $major = $_POST["major"];                  //系別
  $grade = $_POST["grade"];                  //年級
  $course_id = $_POST["course_id"];          //課程代碼
  $class_no = $_POST["class_no"];            //班別
  $day = $_POST["day"];                    //星期
  $course_name = $_POST["course_name"];     //課程名稱

 echo "學年:".$year."\r";
 echo "學期:".$semester."\r";
 echo "教師代碼:".$teacher_id."\r";
 echo "教師姓名:".$teacher_name."\r";
 echo "系級:".$major."\r";
 echo "年級:".$grade."\r";
 echo "課程代碼:".$course_id."\r";
 echo "班別:".$class_no."\r";
 echo "星期:".$day."\r";
 echo "課程名稱:".$course_name."\r";

?>

以「$year = $_POST[“year”];」為例：「$_POST[“year“]」這是接收Flex表單其中的「year」欄位並透過POST方式來接收值(因為在第4步驟最後有提到我們是透過POST方式傳值，所以接收時也要透過POST才能接收)。而接收到的值則存入一個字定義的變數「$year」(為了避免名稱太多混亂，建議字定義變數就和Flex中的ID名稱一樣會比較好判斷)。當然你有多少個欄位就要宣告多少個變數來接收值。

至於語法後半段「echo “學年:”.$year.”\r”;」：這是說明利用「echo」印出值，非PHP的東西要印出必須採用「””」才能印出，若要將非PHP與PHP的東西結合列印出，那要透過「.」來連結，例：「”學年:”.$year.“\r”」。其中的「\r」輸出就是「\r」而已，但因為我們是將php的輸出結果回傳到Flex中，而在Flex中，「\r」的意思是換行，所以最後顯示的「\r」會變成換行的效果，並不會顯示「\r」。