flex和后端的数据交互(二)－－<mx:request/>和<mx:form/>

Flex数据提交与验证

最新推荐文章于 2025-08-28 11:07:45 发布

原创最新推荐文章于 2025-08-28 11:07:45 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #Adobe #XML #ActionScript #Blog

本文介绍如何使用Flex的mx:request标签简化服务器请求参数的处理，并展示了如何利用Flex内置的验证组件进行数据验证。

转载：http://daoger.iteye.com/blog/205894

用actionscript给服务器请求添加参数难免会很麻烦，使用mx:request标签就可以解决这一问题，可以把他
嵌套到HTTPService标签中实现参数的提交。如下例所示：

Xml代码

<mx:request>
<txtPara>{txtPara.text}</txtPara>
</mx:request>

<mx:request>
      <txtPara>{txtPara.text}</txtPara>
 </mx:request>

其中txtPara是发送到服务器端参数的名城，标签体是参数值，而标签体的值就是下方文本框的值。
以下是完整的mxml文件：

Xml代码

<?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代码

<?xml version="1.0" encoding="utf-8"?>
<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/