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

绝地灬酷狼 2022-02-27 15:56 215阅读 0赞

三种方法：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代码** ###

<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][http_www.runoob.com_vue2_vue-loop.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

[http_www.runoob.com_vue2_vue-loop.html]: http://www.runoob.com/vue2/vue-loop.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220227/5d6cc58bd87e4b2aa25825973f956cd5.png