jQuery MiniUI,Ajax Web开发

移动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));
}
?>

作者: fareise
原文: http://blog.csdn.net/fareise/article/details/50615771