extJs学习基础3 ajax与php交互

extJs代码:

 <script src="build/ext-all.js"></script>
<script src="build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script>
Ext.onReady(function(){
// 登录界面
Ext.define('Login', {
requires:['LoginController'], // 要使用加载的类
extend: 'Ext.window.Window',
controller: 'login',
closable: false,
resizable : false,
modal: true,
//draggable: false,
autoShow: true,
title: '用户登录---OA办公系统',
items:[{
xtype:'form',//父窗体
reference: 'form',
bodyPadding: 20,
items:[{
xtype: 'textfield',
name: 'username',
labelWidth: 50,
fieldLabel: '用户名',
allowBlank: false,
emptyText: '用户名或邮箱地址'
},{
xtype: 'textfield',
name: 'password',
labelWidth: 50,
inputType: 'password',
fieldLabel: '密 码',
allowBlank: false,
emptyText: '请输入您的密码'
}]
}],
buttons: [{
name: 'registbutton',
text: '用户注册',
},{
name: 'loginbutton',
text: '用户登录',
region: 'center',
listeners:{
click: 'onLoginbtnClick'//单击事件 调用 LoginController 中的onLoginbtnClick函数
}
}]
}
); // 登录按钮的响应 Ext.define('LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
//用户登录按钮事件处理
onLoginbtnClick: function(){
//根据 view form中设置的 reference:form 中返回一个组件
var form = this.lookupReference('form');
// 判断是否是有效字段 (这个不是很明白)
if (form.isValid()) {
this.login({
data: form.getValues(),
scope: this,
success: 'onLoginSuccess',
failure: 'onLoginFailure'
})}
},
login: function(options) {
// 调用ajax
Ext.Ajax.request({
url: 'test.php',
method: 'POST',
params: options.data,
scope: this,
//callback: this.onLoginReturn, //回调函数
success: this.onLoginSuccess, //ajax请求成功
failure: this.onLoginFailure, //ajax请求失败
original: options
});
}, onLoginSuccess: function(response, options){
var result = response.responseText;
//将json字符串转成 json
var resultJson = JSON.parse(result); if(resultJson.flag){
alert('success');
}else{
alert('failure');
}
}, onLoginFailure: function(response, options){
alert('ajax请求失败');
}
}
); var log = new Login();
log.show(); });
</script>

php代码

 <?php
if(isset($_POST)){
if($_POST['username'] == '123'){
$result = array('flag'=>true);
echo json_encode($result);
}else{
$result = array('flag'=>false);
echo json_encode($result);
}
}
?>
上一篇:Ajax表单提交插件jquery form


下一篇:Knockout学习之表单绑定器(上)