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 ?>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。