vue将ajax返回的json数据循环遍历到html页面上

古城微笑少年丶 2022-02-25 13:11 832阅读 0赞

### ***前提*** ###

**1、下载开发版本的vue.js，这样可以看到报什么错误，生产版本是不报错误的**

**2、ajax作为第三方接口，可以返回后台的数据**

--------------------

### **要点** ###

vue只要在script里面实例化一次就可以了

--------------------

以下是本人开发项目实践成功的代码

***js部分讲解***

实例化vue,

var ap=new Vue({
      el: '#allpost',
      data: {
          sites:[]
      },
      });

以上知识点讲解

1、el:"\#allpost"对应html页面的id="post"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

2、sites是集合  
3、怎么把ajax返回的json集合给vue的sites

ap.sites=ret；就可以了

4、ret如果是集合的形式，console.log(ret)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

5、打印字符串形式的ret ,并且利用https://www.json.cn/查看格式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

目的在于，在前台以\{ \{s.post\_kinds\}\}的格式取数据有没有问题

--------------------

### **js(完整的代码如下)** ###

//ajax连接第三方的地址
    var purl='http://47.93.217.112:8080/jiekou';
    var pp='http://192.168.0.107:8080/jiekou';
    //ajax连接第三方的地址
    //实例化vue
    var ap=new Vue({
      el: '#allpost',
      data: {
          sites:[]
      },
      methods: {
           show_onepost(id) {
               // 显示具体的帖子
                  Topage(id);
               //显示具体的帖子
           }
       },
      });
    //实例化vue
    //初始化
    apiready = function() {
      var kinds = '';
      querylist(kinds);
    }
    //初始化
    function querylist(kk){
    api.ajax({
       url: pp+'/query_kinds.action',
       method: 'post',
       data: {
           values: {
                   post_kinds:kk
           }
       }
    },function(ret, err){
       if (ret) {
         ap.sites = ret;
        // console.log(JSON.stringify( ap.sites ));
       }
    });
     //默认出来所有的帖子，点击蔬菜水果，才会传值过去
    
    }
    //点击就可以进入详情的帖子页面
    function Topage(id){
    api.openFrame({
      name: 'singlebbs',
      url: './singlebbs.html',
      pageParam: {
          post_id: id
      },
    });
    }
    //点击就可以进入详情的帖子页面
    
    //只有登录的用户才可以发布帖子
    function islogin() {
    var name = $api.getStorage('username');
    if (name != null) {
        api.openFrame({
            name: 'sendpost',
            url: './sendpost.html',
        });
    
    } else {
        api.toast({
            msg: '您还没登录，登录之后可以享受更多的权益',
            duration: 2000,
            location: 'bottom'
        });
    
    }
    }
    //只有登录的用户才可以发布帖子

### **Html的完整代码如下** ###

<!DOCTYPE HTML>
    <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>
    
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
          <link rel="stylesheet" type="text/css" href="../css/bbs.css" />
        </head>
        <style>
    		.table tr td {
    		border:1px solid white;
    		}
    	</style>
        <body>
          
           <ul class="nav nav-tabs">
          	<li class="active" onclick="querylist('蔬菜')"><a href="#">蔬菜</a></li>
          	<li><a href="#" onclick="querylist('水果')">水果</a></li>
          	<li><a href="#" onclick="querylist('土地')">土地</a></li>
          	<li><a href="#" onclick="querylist('食品安全')">食品安全</a></li>
                <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          其他
          </a>
          <ul class="dropdown-menu">
            <li onclick="querylist('认养体验')"><a href="#">认养体验</a></li>
            <li onclick="querylist('城乡合作')"><a href="#">城乡合作</a></li>
            <li onclick="querylist('供应信息')"><a href="#">供应信息</a></li>
              <li onclick="querylist('农业快讯')"><a href="#">农业快讯</a></li>
          </ul>
        </li>
      </ul>
            
            
    <div class="alert alert-danger text-right" onclick="islogin()">发布帖子</div>
            
            
    <div id="allpost" >
      <div class="container" >
              <div class="row" v-for="s in sites" @click="show_onepost(s.post_id)">
                <template>
               <div class="col-xs-6">
                  <img :src="s.post_img" class="post_img"/>
               </div>
                <div class="col-xs-6">
                <div class="row dt">{
       {s.post_title}}</div>
                  <div class="row">
                    <div class="col-xs-6 h6">{
       {s.post_byname}}</div>
                  <div class="col-xs-6 h6">{
       {s.answer_num}} </div>
                </div>
                <div class="row h6">{
       {s.post_time}}</div>
              </div>
            </template>
              </div>
            </div>
    </div>
    
    </body>
    <script src="../script/jquery-1.10.2.js"></script>
    <script src="../script/bootstrap.js"></script>
    <script src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script src="../script/bbs.js"></script>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220225/54f45c5b915744dc9c32cc5ad90f2cbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220225/3f484b9e597949668513770c4faecc47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220225/7b3d8dcb37594e89941f0e93a77d2854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220225/027e13122e3b4757abc095c9407a62f1.png