apicloud如何把ret返回的数据循环遍历在html页面上

三种方法：vue.js、js的dom元素拼接、dot.js最方便最好用的是vue.js，最麻烦最不好用的是js的元素拼接我主要讲vue.js和js的dom元素拼接 dot.js和vue.js差不多js的dom元素拼接通过ajax把后台的数据返回到ret里如图所示，要把标签如<tr><td><div>都用字符串的形式拼接起来，这个不是麻烦的，麻...

qq_37591637

4827人浏览 · 2019-03-28 09:30:14

qq_37591637 · 2019-03-28 09:30:14 发布

三种方法：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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^