HTML5开发移动web应用——Sencha Touch篇(6)
本次我们来接触一下Sencha Touch中的AJAX以及 相应的后台PHP程序。
实现表单的AJAX异步提交
需要设定的参数：
url:表单提交时的目标URL地址
standardSubmit:使用布尔值指定表单提交方式（true为同步，false为异步，默认为false）
baseParams属性可以在表单中指定
var formPanel = Ext.create(‘Ext.form.Panel’, {
baseParams:{
id:’1’,
name:’text’
}
})
表单提交的基本代码：
launch:function(){
var formPanel = Ext.create(‘Ext.form.Panel’,{
id:’formPanel’,
scrollable:’vertical’,
url:’filmSave.php’,
items:[
{
xtype:’panel’,
layout:{
type:’hbox’,
pack:’end’
},
defaults:{
xtype:’button’
},
items:{
{
text:’提交’,
handler:function(){
formPanel.submit();
}
},
{
text:’重置’,
handler:function(){
formPanel.reset();
}
}
}
}
],
listeners:{
submit:function(form,result){
Ext.Msg.alert(‘提交成功！’);
},
exception:function(form,result){
Ext.Msg.alert(‘提交失败！’);
}
}
});
Ext.Viewport.add(formPanel);
}
submit事件：第一个参数为执行提交的表单面板组件，第二个参数代表服务器端做出的响应对象
exceeption事件：抛出异常
waitMsg:表单提交时等待信息
formPanel.submit({
waitMsg:{message:’正在提交...’, cls:’demos-loading’}
})
success为当提交后调用的回调函数，服务器通过返回”success”属性来标识提交是否成功，并可添加其他信息
{
“success”:false,
“msg”:’发生错误’,
“errors”:[
{
“field”:”name”,
“message”:”输入的名称在数据库中已存在”
},
{
“field”:”title”,
“message”:”输入的电影标题在数据库中已存在”
}
]
}
Sencha Touch中提供了各种表单验证
在表单中输入一些信息之后，可以使用getValues()方法获取
var obj = formPanel.getValues();
返回的是一个对象，如下：
{
name:”Tom”,
sex:”male”,
......
}
var obj = formPanel.getValues(true)//只返回有效组件
在之前已经介绍过建立数据模型的方法，要想把用户输入表单的信息实例化一个对象，代码如下：
var obj = formPanel.getValues();
var model = Ext.create(‘User’, obj);//User为一个数据模型
这就相当于：
var model = Ext.create(‘User’,{
name:’Tom’,
sex:’male’,
......
})
在建立数据模型的时候可以设定验证方法：
Ext.define(‘User’,{
extend:’Ext.data.Model’,
config:{
field:[//省略],
validations:[
//这里是表单验证内容，type为内置的表单验证类型
//必填项
{type:’presence’,field:’name’,message:’姓名必须输入’},
//填的内容不能是list中的内容
{type:’exclusion’,field:’name’,
list:[‘admin’,’administrator’,’管理员’],message:’不能使用这个姓名’},
//填的内容必须包含在list中
{type:’inclusion’,field:’sex’,
list:[‘male’,’female’],
message:’必须选择性别’},
//按照正则表达式匹配内容
{type:’format’,field:’url’,
matcher:......,
message:’必须输入有效的网址’}
]
}
})
对应的后台php代码
<?php
$name = formatStr($_REQUEST[‘name’]);
$sex = $_REQUEST[‘sex’];
//其他取值类似
//数据库配置代码略
$result = mysql_query(“SELECT * FROM users where name=’”.$name.”’”,$link);
if(mysql_num_rows($result) > 0){
echo ‘{“success”:false,
“errors”:[{“message”:’.json_encode(“该用户名已存在”).’}]}’;
}else{
//插入数据
$sql = “insert into users(name, sex, password, age, email, url, memo)”;
$sql = $sql.”values(”;
$sql = $sql.”’”.$name.”’,”;
//......省略其他
mysql_query($sql);
}
function formatStr($str){
return trim(str_replace(“’”,”’’”,$str));
}
?>