版权声明：博客知识产权来源命运的信徒，切勿侵权 https://blog.csdn.net/qq_37591637/article/details/88861791
三种方法：vue.js、js的dom元素拼接、dot.js
最方便最好用的是vue.js，最麻烦最不好用的是js的元素拼接
我主要讲vue.js和js的dom元素拼接 dot.js和vue.js差不多
js的dom元素拼接
通过ajax把后台的数据返回到ret里
如图所示，要把标签如<tr><td><div>都用字符串的形式拼接起来，这个不是麻烦的，麻烦的是有点击事件，这里面的单引号双引号语法什么的，特别麻烦，一旦报错，检查起来就是要命！！！
js代码
apiready = function() {
var post_id=api.pageParam.post_id;
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/query_id.action',
method: 'post',
data: {
values: {
post_id: post_id
},
}
}, function(ret, err) {
//循环遍历数据
//把数据显示在页面上面
var mpost = $api.byId('mpost'); //获取在前端要显示的div的id
var postid = JSON.stringify(ret[0].post_id);
var post_img = JSON.stringify(ret[0].post_img);
var post_title = JSON.stringify(ret[0].post_title);
var post_byname = JSON.stringify(ret[0].post_byname);
var answer_num = JSON.stringify(ret[0].answer_num);
var post_time = JSON.stringify(ret[0].post_time);
var post_content = JSON.stringify(ret[0].post_content);
var post_kinds = JSON.stringify(ret[0].post_kinds);
//标题\""+id+"\"Uncaught SyntaxError: Invalid or unexpected token at bbs.html : 1
$api.append(mpost, "<div class='container' >" +
"<div class='row text-center h3'>" + post_title +
"</div><div class='row h5'>" +
"<span>" + post_byname + "</span>" +
"<span>回帖数" + answer_num + "</span></div>" +
"<div class='row h5'>" + post_time + "</div>" +
"<div class='row h5'>" + post_content +
"</div> <div class='row'>图片" +"</div></div>");
}
});
}
HTML页面很简单
<body>
<div id="mpost">//这里的id="mpost"在ajax拼接的时候会用到
</div>
<body>vue.js
1、要下载vue.js，在Html页面上引入这个vue.min.js
html页面的代码（有点类似于c标签和标签的在jsp上面的循环遍历）
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我的-购物车</title>
<script src="../script/jquery-1.10.2.js"></script>
<script src="../script/vue.min.js"></script>
<script src="../script/bootstrap.js"></script>
<script src="../script/api.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<body>
<div id="app">
<table>
<tr>
<td>id号</td><td>标题</td><td>内容</td><td>发帖人</td><td>发帖时间</td><td>回复数</td><td>种类</td>
</tr>
<tr v-for="s in sites">
<td>{{ s.post_id }}</td><td>{{ s.post_title }}</td><td>{{ s.post_content }}</td>
<td>{{ s.post_byname }}</td><td>{{ s.post_time }}</td><td>{{ s.answer_num }}</td>
<td>{{ s.post_kinds }}</td>
</tr>
</table>
</div>
</body>
</html>js代码
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
apiready=function(){
api.ajax({
url: 'http://192.168.0.107:8080/jiekou/query_post.action',
method: 'post',
},function(ret, err){
if (ret) {
new Vue({
el: '#app',
data: {
sites:ret
}
})
}
});
}
</script>这里涉及vue.js循环遍历数据的语法，看文档http://www.runoob.com/vue2/vue-loop.html
