ajax解析json对象集合

这个需求是我们做项目经常遇到的，当你想渲染表格的数据，你的数据在servlet中存在了arraylist中，你想把arraylist传到ajax的data中，这时候就需要用到ObjectMapper对象来传递json数据，在ajax中用tableVue进行解析。

 

Servlet

 String LinesName = request.getParameter("LinesName");            mannger dao = new mannger();            ArrayList<Lines> linesarray = new ArrayList<Lines>();            dao.SelectLines(linesarray,LinesName);            response.setContentType("text/html;charset=UTF-8"); //            ObjectMapper mapper = new ObjectMapper();            mapper.writeValue(response.getWriter(),linesarray);//传递arraylist对象

html

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">            <legend>Information</legend>        </fieldset>        <div  class="layui-form" id="Ai">            <table class="layui-table" id="information">                <colgroup>                    <col width="auto">                    <col width="auto">                    <col width="auto">                    <col width="auto">                    <col width="auto">                    <col width="auto">                    <col width="auto">                    <col width="auto">                </colgroup>                <thead>                <tr >                    <th>线路ID</th>                    <th>线路名称</th>                    <th>车站ID</th>                    <th>车站名称</th>                </tr>                </thead>                <tbody>                <tr v-for="site in itemss">                    <td> {{ site.linesID }}</td>                    <td> {{ site.linesName }}</td>                    <td> {{ site.siteID }}</td>                    <td> {{ site.siteName}}</td>                </tr>                </tbody>            </table>        </div> <script>            function   Information(){                var LinesName = $("#LinesName").val();                var tableVue = new Vue({                    el:"#information",                    data:{                        itemss:[]                    }                });                $.ajax({                    url: "Select?method1=SelectLines",                    type: "GET",                    data: {"LinesName":LinesName},                    success: function (data) {                        //var data = JSON.parse( jsonObj );//解析json对象                        console.log(data);                        tableVue.itemss=data;                    },//响应成功后的回调函数                    error: function () {                        alert("出错啦...")                    },//表示如果请求响应出现错误，会执行的回调函数                    dataType: "json"//设置接受到的响应数据的格式                });                document.getElementById("Bi").style.display="none";                document.getElementById("Ai").style.display="block";                document.getElementById("Ci").style.display="none";            }        </script>

在表格中

  <tr v-for="site in itemss">                    <td> {{ site.linesID }}</td>                    <td> {{ site.linesName }}</td>                    <td> {{ site.siteID }}</td>                    <td> {{ site.siteName}}</td>                </tr>
具体的名称要在网页控制台来查看，一般第一个字母是小写的。

实现效果

 

 

这个功能需要导入很多jar包，因为各种原因，我就不在上传，需要的可以联系我，有什么问题也可以私信我，欢迎来访！！！