前端ajax获取从后台传回的数据

来源:互联网 发布:电脑版ftp 软件 编辑:程序博客网 时间:2024/09/21 06:15

这里写图片描述

这个是官网的地址
https://aui.github.io/art-template/zh-cn/docs/api.html

这里的数据全是从后台传过来的,今天说一下如何操作。

jsp页面:<div class="concrete-message">
</div>

<script type="text/html" id="result-tpl">    {{each resultSet as searchData}}    <div class="message-div">        <div class="tr-no1">            <span>(&nbsp;<a>差异</a>|&nbsp;&nbsp;<a>历史</a>)</span>            <span>&nbsp;&nbsp;. . <a>({{searchData.number}})</a>&nbsp;;</span>            <span>&nbsp;{{searchData.date}}&nbsp;. .</span>            <span class="some-num">&nbsp;(&nbsp;{{searchData.addCount}}&nbsp;)</span>            <span>&nbsp;. . <a>{{searchData.otherMessage}}</a>(&nbsp;<a>讨论</a>&nbsp;|&nbsp;<a>贡献</a>&nbsp;)</span>            <span>&nbsp;&nbsp;(</span>            <span class="description">已添加的[ru]描述&nbsp;:</span>            <span>&nbsp;{{searchData.description}}&nbsp;)</span>        </div>        <div class="tr-no2">            <span>(&nbsp;<a>{{searchData.labelCount}}个标签</a>&nbsp;:&nbsp;<a>{{searchData.reCh}}</a>&nbsp;)</span>        </div>    </div>    {{/each}}</script>

js中function initResultList() {
$.ajax({
data: {},
success: function (data) {
data = {
"resultSet": [{
'number': 'Q32366829',
'date': '07:29',
'addCount': '+114',
'otherMessage': 'Infovarius',
'description': 'категория в проекте Викимедиа',
'labelCount': '1',
'reCh': 'reCh [1,1]'
},
{
'number': 'Q32366829',
'date': '07:29',
'addCount': '+114',
'otherMessage': 'Infovarius',
'description': 'категория в проекте Викимедиа',
'labelCount': '1',
'reCh': 'reCh [1,1]'
},
{
'number': 'Q32366829',
'date': '07:29',
'addCount': '+114',
'otherMessage': 'Infovarius',
'description': 'категория в проекте Викимедиа',
'labelCount': '1',
'reCh': 'reCh [1,1]'
},
{
'number': 'Q32366829',
'date': '07:29',
'addCount': '+114',
'otherMessage': 'Infovarius',
'description': 'категория в проекте Викимедиа',
'labelCount': '1',
'reCh': 'reCh [1,1]'
},
{
'number': 'Q32366829',
'date': '07:29',
'addCount': '+114',
'otherMessage': 'Infovarius',
'description': 'категория в проекте Викимедиа',
'labelCount': '1',
'reCh': 'reCh [1,1]'
}]
}
var resultSet = data.resultSet;
if (resultSet.length > 0) {
var temp = template("result-tpl", {
"resultSet": resultSet
});
$('.concrete-message').append(temp);
}
else {
$('.concrete-message').html('<div class="empty">暂时没有搜索历史</div>');
}
},
error: function (data, status, e) {
alert("服务器异常");
}
})
}

css中加一些样式就行了,这样就完成了从后台取值,但是我这是写的一个假数据,如果真实的就要将ajax中加一个url,到一个control层,在control层返回一个json就可以了。
但是所加的数据并不能执行js操作。
例如 我在jsp中写的所添加了一个class为‘message-div‘的div,但是你如果在js中对‘message-div’ 写一个js操纵事件并不会执行,这是因为所添加的信息都是在dom所解析完成后又添加的。
对于这一点各位如果有解决的办法希望告知一下:ytulnj@163.com
十分感谢

原创粉丝点击