本次我们来接触一下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”:”输入的电影标题在数据库中已存在”
}
]
}

在表单中输入一些信息之后，可以使用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));
}
?>

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！