突然发现某位大侠的管理后台是用EXT JS写的，让我觉得效果非常炫，所以自己也开始自学EXT JS。
做了一个DEMO，功能主要是前台页面获取后台返回的自定义的错误信息。
本DEMO需要自己下EXT的框架包。
页面demo.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="resources/css/xtheme-gray.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
function ready()
{
Ext.Ajax.request
({
url:"json.php",
success: function(response,option)
{
var resu = Ext.decode(response.responseText);
if(resu)
{
if(resu.success)
{
Ext.Msg.alert('提示消息',"加载成功！");
}
else
{
Ext.Msg.alert('提示消息',"加载失败！失败信息："+resu.error);
}
}
},
failure: function(response,option)
{
Ext.Msg.alert('提示消息',"加载失败！后台出现了严重的未捕获到的异常！");
}
});
}
Ext.onReady(ready);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ext demo</title>
<link rel="Stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="resources/css/xtheme-gray.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
function ready()
{
Ext.Ajax.request
({
url:"json.php",
success: function(response,option)
{
var resu = Ext.decode(response.responseText);
if(resu)
{
if(resu.success)
{
Ext.Msg.alert('提示消息',"加载成功！");
}
else
{
Ext.Msg.alert('提示消息',"加载失败！失败信息："+resu.error);
}
}
},
failure: function(response,option)
{
Ext.Msg.alert('提示消息',"加载失败！后台出现了严重的未捕获到的异常！");
}
});
}
Ext.onReady(ready);
</script>
</body>
</html>
后台处理页面json.php：
header('Content-Type: text/html; charset=utf-8');
try{
$hostname='localhost';
$user='root123';
$pwd='123';
$dbname='uc';
$sql='SELECT * FROM `uc_members`';
$info=array();
$connect = @mysql_connect($hostname,$user,$pwd);
if ($connect === false)
{
throw new Exception('cannot connect do mysql');
}
$select = @mysql_select_db($dbname,$connect);
if ($select === false)
{
throw new Exception('cannot select db');
}
$query = mysql_query($sql , $connect);
if ($query === false)
{
throw new Exception('db syntax error');
}
$info['success'] = true;
$info['error'] = 'all right';
mysql_close($connect);
}
catch(Exception $ex)
{
$info['success'] = false;
$info['error'] = $ex->getMessage();
}
$json_string=json_encode($info);
echo $json_string;
try{
$hostname='localhost';
$user='root123';
$pwd='123';
$dbname='uc';
$sql='SELECT * FROM `uc_members`';
$info=array();
$connect = @mysql_connect($hostname,$user,$pwd);
if ($connect === false)
{
throw new Exception('cannot connect do mysql');
}
$select = @mysql_select_db($dbname,$connect);
if ($select === false)
{
throw new Exception('cannot select db');
}
$query = mysql_query($sql , $connect);
if ($query === false)
{
throw new Exception('db syntax error');
}
$info['success'] = true;
$info['error'] = 'all right';
mysql_close($connect);
}
catch(Exception $ex)
{
$info['success'] = false;
$info['error'] = $ex->getMessage();
}
$json_string=json_encode($info);
echo $json_string;
效果图如下：
