第一次写关于AppCan开发的文章,有人写了关于jQuery或者原生Ajax与json的交互,那我就稍微写写我开发过程中使用jQuery获取json后使用zy_tmpl生成下拉菜单的实例吧。
PHP服务端生成json的那部分就不写那么多了,就是输入一个数组$res,然后
echo $_GET['jsoncallback'] . "(" . json_encode($res) . ")";
在AppCan的模版中,先加入一个下拉菜单,我的菜单是:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!--下拉列表开始--> < div class = " ui-has-label" > < label class = "ui-select " >选择楼群:</ label > < div class = "ui-select" > < div class = "ui-btn ui-btn-icon-right ui-btn-corner-all ui-btn-b" > < span class = "ui-btn-inner ui-btn-corner-all" > < span class = "ui-btn-text" >楼名</ span > < div class = "ui-li-link-alt ui-btn ui-btn-corner-right ui-shadow" > < span class = "ui-icon ui-icon-arrow-d ui-icon-shadow" ></ span > </ div > </ span > < select name = "lc" id = "lc" selectedIndex = "0" id = "select-choice-0" onchange = "zy_slectmenu(this.id)" > 数据加载中,请稍候 </ select > </ div > </ div > </ div > <!--下拉列表结束--> |
然后在中加入:
1
2
3
4
5
6
7
|
function getlq(){ $.getJSON( 'http://localhost/json.php?jsoncallback=?' , function (data) { var tmpl= '<option value="${BuildingId}">${BuildingName}</option>' ; $( "#lc" ).html( "" ); $( "#lc" ).append(zy_tmpl(tmpl,data,zy_tmpl_count(data))); }) } |
这样在onload或者onchange、onclick时执行getlq();就能实现select的更新。
以上所述就是本文的全部内容了,希望大家能够喜欢。
请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!