ExtJS5.1学习笔记9——Ext中的Ajax请求
下面的代码展示了在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',//请求的URL
params: {//请求参数
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，就返回登录成功的消息，否则返回登录失败的消息