aardio学习记录-2.使⽤json实现aardio与html界⾯的数据互动
新建了⼀个webkit(HTML5)项⽬,可以很⽅便的⽤HTML+JS+CSS制作程序UI,现在想实现的效果是,程序集成⼀个sqlite数据库⽂件,⽤aardio读出来,然后使⽤json格式把数据传给前端UI进⾏显⽰,这样搞起来:
⼯程资源
资源⽂件⾥⾯包含了sqlite数据库⼀个
HTML中引⼊了bootstrap做前端框架,以及相关的fonts和js
HTML下⾯的post⽂件夹(虚拟)中的dao.aardio相当于做php开发时候的后台程序,⽤来⽣成json格式字符串给前端调⽤
⽤户库⾥⾯新建dex库⽤来写⾃定义类,⽤来连接sqlite数据库并返回查询结果,是aardio⾥⾯的table类型数据
主要代码部分
HTML下⾯的main.aardio(其实就是程序的HTML界⾯)
<!doctype html>
<html>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<link rel="stylesheet"href="css/bootstrap.min.css">
<link rel="stylesheet"href="css/main.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(e) {
$.get("post/dao.aardio",function(data){
//$("#out").hide();
var jData=eval(data);  //这⾥⼀定要对get获得的原始data数据进⾏eval处理,否则下⾯的.each⽆法正常使⽤
$.each(jData,function(i,item){
$("#out2").append(item.id+"  " + item.name);
});
});
});
</script>
<body>
<div id="header">
<div class="ctrls"><a id="window-min"onclick="windowCommand('min')">0</a><a id="window-max"onclick="this.innerText = windowCommand('max')?'2 <div class="title-bar"onmousedown="windowCommand('drag')"><span class=title>我的软件</span></div>
</div>
<div id="container">
<div class="lside">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"class="active"><a href="#">流程顺序</a></li>
<li role="presentation"><a href="#">1.确定检查专业</a></li>
<li role="presentation"><a href="#">2.抽取检查组长</a></li>
<li role="presentation"><a href="#">3.抽取县区名单</a></li>
<li role="presentation"><a href="#">4.抽取执法⼈员名单</a></li>
<li role="presentation"><a href="#">5.抽取企业名单</a></li>
<li role="presentation"><a href="#">6.导出结果</a></li>
</ul>
</div>
<div class="rside">
<div id="step1">
<h3>请选择要检查的专业</h3>
<select name="zhuanyeSelect"multiple onChange="alert();">
<option value="⼯业">⼯业</option>
<option value="能源">能源</option>
<option value="投资">投资</option>
</select>
<p id="out"></p>
<hr />
<p id="out2"></p>
</div>
</div>
</div>
<div id="footer">
<button onclick="javascript:external.aardioCall('hello')">点击这⾥调⽤external.aardioCall('hello') </button>
</div>
</body>
</html>
HTML/post/dao.aardio
import dex;
dao=dex.dao();
var Zhuanye();
import web.json;
var jstr=web.json.stringify(zhuanye,true);
前端ui框架是什么意思print("(" + jstr + ")");    //这⾥⼀定要在转好的json字符串外⾯再加上⼀对括号,否则jQuery⽆法识别⽤户库下⾯的dex
namespace dex{
import sqlite;
class dao{
getZhuanye=function(){
var db=..sqlite("\res\database.db");
var sql="select * from zhuanye";
var Table(sql);
return result;
}
}
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。