ExtJS5.1学习笔记9——Ext中的Ajax请求

来源：互联网发布：lamb单人镜头数据编辑：程序博客网时间：2024/06/08 02:12

下面的代码展示了在Ext中使用Ajax的方法：

首先是html文件的代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><!-- 下面是三个必须引入的文件 --><link rel="stylesheet" type="text/css" href="../../build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><script src="../../build/ext-all.js"></script><script src="../../build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script><script type="text/javascript">Ext.onReady(function(){var form = Ext.create('Ext.form.Panel', {renderTo: 'form',frame: true,title: 'Login',width: 300,height: 250,layout: 'form',bodyPadding: 20,fieldDefaults: {labelSeparator: '：',labelWidth: 50,labelAlign: 'left'},items: [{fieldLabel: '姓名',xtype: 'textfield',name: 'username'}, {fieldLabel: '密码',xtype: 'textfield',inputType: 'password', //加上该属性后，输入框变为密码框name: 'password'}],buttons: [{text: '登录',handler: login}]});function login(){var formValues = form.getForm().getValues();//获取表单中的所有字段的值//分别获取username和password的值var username = formValues['username'];var password = formValues['password'];var config = {url: 'login.php',//请求的URLparams: {//请求参数username: username,password: password},method: 'post',//指定post请求callback: function(options, success, response){//请求完成的回调函数Ext.Msg.alert('message', response.responseText);}};Ext.Ajax.request(config);//发送请求}});</script></head><body><div id="form"></div></body></html>

在浏览器中的效果如下图：

点击登录按钮后，会发送请求给login.php页面，该页面的代码如下：

<?php$username = $_POST["username"];$password = $_POST["password"];if($username == 'zhangsan' && $password == '123456'){echo '登录成功';}else{echo '登录失败';}?>

在这个页面中，只是简单的判读了用户名和密码如果是zhangsan和123456，就返回登录成功的消息，否则返回登录失败的消息

0 0