转载:http://daoger.iteye.com/blog/205894
用actionscript给服务器请求添加参数难免会很麻烦,使用mx:request标签就可以解决这一问题,可以把他
嵌套到HTTPService标签中实现参数的提交。如下例所示:
- <mx:request>
- <txtPara>{txtPara.text}</txtPara>
- </mx:request>
<mx:request> <txtPara>{txtPara.text}</txtPara> </mx:request>
其中txtPara是发送到服务器端参数的名城,标签体是参数值,而标签体的值就是下方文本框的值。
以下是完整的mxml文件:
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
- <mx:Script>
- <![CDATA[
- import mx.rpc.events.ResultEvent;
- import mx.controls.Alert;
- private function httpHandle(e:ResultEvent):void
- {
- Alert.show(e.result.Result);
- }
- ]]>
- </mx:Script>
- <mx:HTTPService id="myHttp" url="http://localhost:8080/myflex/http" showBusyCursor="true" result="httpHandle(event);" useProxy="false">
- <mx:request>
- <txtPara>{txtPara.text}</txtPara>
- </mx:request>
- </mx:HTTPService>
- <mx:Panel title="TEST HTTPService" width="368" height="140" x="78" y="30" layout="absolute">
- <mx:Label text="PARA" x="110" y="26"/>
- <mx:TextInput id="txtPara" x="161" y="24" width="95"/>
- <mx:Label text="The para sent to service is:" x="58" y="53"/>
- <mx:Label x="126" y="53" id="lblResult"/>
- <mx:Button label="Submit" click="myHttp.send()" x="277" y="53"/>
- </mx:Panel>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" > <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.controls.Alert; private function httpHandle(e:ResultEvent):void { Alert.show(e.result.Result); } ]]> </mx:Script> <mx:HTTPService id="myHttp" url="http://localhost:8080/myflex/http" showBusyCursor="true" result="httpHandle(event);" useProxy="false"> <mx:request> <txtPara>{txtPara.text}</txtPara> </mx:request> </mx:HTTPService> <mx:Panel title="TEST HTTPService" width="368" height="140" x="78" y="30" layout="absolute"> <mx:Label text="PARA" x="110" y="26"/> <mx:TextInput id="txtPara" x="161" y="24" width="95"/> <mx:Label text="The para sent to service is:" x="58" y="53"/> <mx:Label x="126" y="53" id="lblResult"/> <mx:Button label="Submit" click="myHttp.send()" x="277" y="53"/> </mx:Panel> </mx:Application>
在服务器端就可以从request中取到txtPara参数的值,这里没有做过多处理,只是在后端取到这个值又通过xml形式返还到客户端。
这是例子运行的截图:
mx:request组件一般是结合mx:form组件一起使用,flex提供了完备的数据校验功能,如对字符串的校验mx:StringValidator、
对电话号码验证的mx:PhoneNumberValidator、对日期验证的mx:DateValidator、对电子邮件验证的mx:EmailValidator、对邮编验证
的mx:ZipCodeValidator等等。下面这个示例来自Flex的在线文档,主要展示flex的form验证功能,没有数据的提交。
- <?xml version="1.0" encoding="utf-8"?>
- <!-- Simple example to demonstrate Form layout container. -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
- <mx:Panel title="Form Container Example" height="75%" width="75%"
- paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
- <mx:Text width="100%" color="blue"
- text="Moving from one form field to another triggers the validator."/>
- <mx:Form width="100%" height="100%">
- <mx:FormHeading label="Enter values into the form."/>
- <mx:FormItem label="First name">
- <mx:TextInput id="fname" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="Date of birth (mm/dd/yyyy)">
- <mx:TextInput id="dob" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="E-mail address">
- <mx:TextInput id="email" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="Age">
- <mx:TextInput id="age" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="SSN">
- <mx:TextInput id="ssn" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="Zip">
- <mx:TextInput id="zip" width="200"/>
- </mx:FormItem>
- <mx:FormItem label="Phone">
- <mx:TextInput id="phone" width="200"/>
- </mx:FormItem>
- </mx:Form>
- </mx:Panel>
- <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/>
- <mx:PhoneNumberValidator source="{phone}" property="text"/>
- <mx:DateValidator source="{dob}" property="text"/>
- <mx:EmailValidator source="{email}" property="text"/>
- <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value"
- minValue="18" maxValue="100" domain="int"/>
- <mx:SocialSecurityValidator source="{ssn}" property="text"/>
- <mx:ZipCodeValidator source="{zip}" property="text"/>
- </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <!-- Simple example to demonstrate Form layout container. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="Form Container Example" height="75%" width="75%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:Text width="100%" color="blue" text="Moving from one form field to another triggers the validator."/> <mx:Form width="100%" height="100%"> <mx:FormHeading label="Enter values into the form."/> <mx:FormItem label="First name"> <mx:TextInput id="fname" width="200"/> </mx:FormItem> <mx:FormItem label="Date of birth (mm/dd/yyyy)"> <mx:TextInput id="dob" width="200"/> </mx:FormItem> <mx:FormItem label="E-mail address"> <mx:TextInput id="email" width="200"/> </mx:FormItem> <mx:FormItem label="Age"> <mx:TextInput id="age" width="200"/> </mx:FormItem> <mx:FormItem label="SSN"> <mx:TextInput id="ssn" width="200"/> </mx:FormItem> <mx:FormItem label="Zip"> <mx:TextInput id="zip" width="200"/> </mx:FormItem> <mx:FormItem label="Phone"> <mx:TextInput id="phone" width="200"/> </mx:FormItem> </mx:Form> </mx:Panel> <mx:StringValidator source="{fname}" property="text" minLength="4" maxLength="12"/> <mx:PhoneNumberValidator source="{phone}" property="text"/> <mx:DateValidator source="{dob}" property="text"/> <mx:EmailValidator source="{email}" property="text"/> <mx:NumberValidator source="{age}" property="text" integerError="Enter Integer value" minValue="18" maxValue="100" domain="int"/> <mx:SocialSecurityValidator source="{ssn}" property="text"/> <mx:ZipCodeValidator source="{zip}" property="text"/> </mx:Application>
示例运行的截图:
其他一些入门例子可以参考:甘先生Blog http://www.blogjava.net/gump/articles/22859.html
更多问题请参考Flex的在线文档:http://www.adobe.com/support/documentation/en/flex/