HTML5开发移动web应用——Sencha Touch篇(6)

时间:2021-09-16 09:12:40

本次我们来接触一下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));

}

?>