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

		  				

		  				

													


						
							

							
																
Tags:  

																

								

							

						
						
						


						 

							
					

					    
									

													

													
											


			


			


	

		
VirMach 便宜 VPS
 


QNews
 
QNews