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包，因为各种原因，我就不在上传，需要的可以联系我，有什么问题也可以私信我，欢迎来访！！！

巴特西

ajax解析json对象集合

最新文章

热门文章