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