extJs学习基础3 ajax与php交互

extJs代码:

  1 <script src="build/ext-all.js"></script>
  2     <script src="build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  3     <link rel="stylesheet" href="build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
  4 
  5 <script>
  6         Ext.onReady(function(){
  7             // 登录界面
  8             Ext.define('Login',  {  
  9                 requires:['LoginController'],     // 要使用加载的类
 10                 extend: 'Ext.window.Window',  
 11                 controller: 'login',  
 12                 closable: false,  
 13                 resizable : false,  
 14                 modal: true,  
 15                 //draggable: false,  
 16                 autoShow: true,  
 17                 title: '用户登录---OA办公系统',  
 18                 items:[{  
 19                     xtype:'form',//父窗体  
 20                     reference: 'form',  
 21                     bodyPadding: 20,  
 22                     items:[{  
 23                         xtype: 'textfield',  
 24                         name: 'username',  
 25                         labelWidth: 50,  
 26                         fieldLabel: '用户名',  
 27                         allowBlank: false,  
 28                         emptyText: '用户名或邮箱地址'  
 29                       },{  
 30                         xtype: 'textfield',  
 31                         name: 'password',  
 32                         labelWidth: 50,  
 33                         inputType: 'password',   
 34                         fieldLabel: '密  码',  
 35                         allowBlank: false,  
 36                         emptyText: '请输入您的密码'  
 37                       }]  
 38                 }],  
 39                 buttons: [{  
 40                             name: 'registbutton',  
 41                             text: '用户注册',   
 42                           },{  
 43                             name: 'loginbutton',  
 44                             text: '用户登录',   
 45                             region: 'center',  
 46                             listeners:{  
 47                               click: 'onLoginbtnClick'//单击事件 调用 LoginController 中的onLoginbtnClick函数  
 48                             }  
 49                           }]  
 50               }  
 51             ); 
 52 
 53             // 登录按钮的响应
 54 
 55             Ext.define('LoginController', {  
 56                 extend: 'Ext.app.ViewController',  
 57                 alias: 'controller.login',  
 58                //用户登录按钮事件处理  
 59                onLoginbtnClick: function(){  
 60                     //根据 view form中设置的 reference:form 中返回一个组件
 61                     var form = this.lookupReference('form'); 
 62                     // 判断是否是有效字段 (这个不是很明白)
 63                     if (form.isValid()) { 
 64                         this.login({  
 65                             data: form.getValues(),  
 66                             scope: this,  
 67                             success: 'onLoginSuccess',  
 68                             failure: 'onLoginFailure'  
 69                     })} 
 70                 },  
 71                 login: function(options) { 
 72                     // 调用ajax
 73                     Ext.Ajax.request({  
 74                         url: 'test.php',  
 75                         method: 'POST',  
 76                         params: options.data,  
 77                         scope: this,  
 78                         //callback: this.onLoginReturn, //回调函数 
 79                         success: this.onLoginSuccess,   //ajax请求成功
 80                         failure: this.onLoginFailure,   //ajax请求失败
 81                         original: options  
 82                     });  
 83                 },  
 84                 
 85                 onLoginSuccess: function(response, options){
 86                     var result = response.responseText;
 87                     //将json字符串转成 json
 88                     var resultJson = JSON.parse(result);
 89                     
 90                     if(resultJson.flag){
 91                         alert('success');
 92                     }else{
 93                         alert('failure');
 94                     }
 95                 },
 96 
 97                 onLoginFailure: function(response, options){
 98                     alert('ajax请求失败');
 99                 }
100               }  
101             );  
102 
103             var log = new Login();
104             log.show();
105 
106         });
107     </script>

php代码

 1 <?php 
 2     if(isset($_POST)){
 3         if($_POST['username'] == '123'){
 4             $result = array('flag'=>true);
 5             echo json_encode($result);
 6         }else{
 7             $result = array('flag'=>false);
 8             echo json_encode($result);
 9         }
10     }
11 ?>