ajax demo

jQuery.ajax({
        type: "GET",
        cache: false,
        url: encodeURI("/mobile/plugin/1/DataInputFromMobile.jsp"),
        data: strData,
        dataType: "json",  
        contentType : "application/x-www-form-urlencoded;charset=UTF-8",
        complete: function(){
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
        } , 
        success : function (data, textStatus) {
            if (data == undefined || data == null) {
                return;
            } else {

            }
        } 
    }); 

vue

<template>
  <div class="table">
        <div class="nav-manager"></div>
        <div class="content">
            <ul class="data">
                <li v-for="json,index in datas" :key="json.mid"  class="data-dt">
                    <!-- <span class="img-w" >{{json.portrait}}</span> -->
                    <span>{{json.mid}}</span>
                    <a href="#">
                    <img :src="json.portrait" width="50" height="50" /></a>
                    <span>{{json.name}}</span>
                </li>
            </ul>
        </div>
        </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
       datas:{} 
    };
  },
mounted () {
    this.axios.get('../static/data/init.json').then((res) => {
            let result = res.data
            console.log(result);
            this.datas = result;
    });
  }
};
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}
html,body{
    width:100%;
    height:100%;
    background-color: #f4f4f4;
    color:#3c3c3c;
    overflow-x: hidden;
}
.table{
    width: 350px;
    height: 620px;
    border: 1px solid black;
    margin: 0 auto;
    padding: 0;

}
.nav-manager{
    width: 350px;
    height: 53px;
    border: 1px solid black;
}
.content{
    width: 350px;
    /* height: 53px; */
    border: 1px solid black;
}
.content .data li{
    height: 100px;
    float:left;
}
.content .data .img-box{
    position:relative;
    z-index:1;
}
.content .data .img-box img{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100px;
    height: 100px;
    margin:auto;
    z-index: -1;
    *zoom:1;
}

</style>

init.json

[{"name":"王晓明","portrait":"./static/images/toux01.jpg","mid":"54461461"},{"name":"李大壮","portrait":"./static/images/toux02.jpg","mid":"54461462"},{"name":"张小梅","portrait":"./static/images/toux03.jpg","mid":"54461463"}]

image.png image.png