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));

}

?>