【Lua】LWT后台用JSON与 ExtJS传递数据

时间:2022-03-19 22:27:19

  要完成目录树的构建,需要前台ExtJS构筑页面,后台处理逻辑,中间由JSON传递数据。

  首先搭建后台环境:

 require "httpd"
require "lfs" request, args = ... local s = {root = {
text = "rootNode",
expanded = true,
children = {
{
text = 'book1',
leaf = true
},
{
text = "book2",
expanded = true,
children = {
{
text = "con1",
leaf = true
},{
text = "con2",
leaf = true
}
}
},
{
text = "book3",
expanded = true,
leaf = true
}
}
}
} local cjson = require("cjson")
local tJson = cjson.encode(s) httpd.set_content_type("text/json")
httpd.write(tJson)

  这里虚拟了一个树数据结构s,将其打包后返回给请求方。

  然后是html部分:

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../ext-5.0.0/examples/shared/example.css" /> <script type="text/javascript" src="../ext-5.0.0/examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../ext-5.0.0/examples/shared/options-toolbar.js"></script> <script type="text/javascript" src="test.js" charset="utf-8" ></script> </head>
<body style=" margin: 0; padding: 0;">
</body>
</html>

  最后是ExtJS部分:

 Ext.require('Ext.tree.Panel')

 Ext.onReady(function(){
Ext.Ajax.request({
url: 'm.lua',     //后台文件path
method: 'post',
params: {
action: 'getDir',
},
success: function(response){
var text = response.responseText;
var obj = eval('(' + text + ')');
console.log(obj);
},
failure: function() {
Ext.Msg.alert("失败","失败了");
}
});
});

  其中response内容是这样的:

【Lua】LWT后台用JSON与 ExtJS传递数据

  所以可以用"response.responseText"来调用响应内容的主体。

  在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。

  JSON字符串转换为JSON对象:

    var obj = eval('(' + str + ')');

  这样就能获取一个可供使用的JSON对象了。

    【Lua】LWT后台用JSON与 ExtJS传递数据