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 ?>