首页 > 代码库 > extJs学习基础3 ajax与php交互

extJs学习基础3 ajax与php交互

extJs代码:

  1 <script src="http://www.mamicode.com/build/ext-all.js"></script>  2     <script src="http://www.mamicode.com/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>  3     <link rel="stylesheet" href="http://www.mamicode.com/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 ?>

 

extJs学习基础3 ajax与php交互