原创

jquery 遍历json对象

本次实例是通过ajax请求后端数据,然后后端将数据返回给前端,需要一个GSON插件(下载地址:https://mvnrepository.com/artifact/com.google.code.gson/gson):

         前端代码:

  1. <button id="select">查找类型</button>
  2. <table border="1">
  3. <thead>
  4. <td>id</td>
  5. <td>名称</td>
  6. <td>简述内容</td>
  7. </thead>
  8. <tbody id="tb"></tbody>
  9. </table>

后端代码:

  1. @RequestMapping(value = "/test",produces = "text/plain;charset=utf-8"/*防止数据到前端乱码*/)
  2. @ResponseBody
  3. public String test(Model model){
  4. List<Type> list = typeManagerService.selectType();
  5. model.addAttribute("lists",list);
  6. Gson gson = new Gson();
  7. //此处是将list集合转换为json对象
  8. String att = gson.toJson(list);
  9. return att;
  10. }

第一种方式(for循环):

  1. <script type="text/javascript">
  2. $("#select").click(function () {
  3. $.ajax({
  4. url:'/test',
  5. type:'get',
  6. contentType: 'application/x-www-form-urlencoded; charset=utf-8',
  7. dataType:'json',
  8. success:function (data) {
  9. $("#tb").empty();
  10. var htm = "";
  11. for (var i = 0;i<data.length;i++){
  12. htm+="<tr><td>"+data[i].type_id+"</td><td>"+data[i].type_name+"</td><td>"+data[i].type_describe+"</td></tr>";
  13. }
  14. $("#tb").append(htm);
  15. }
  16. })
  17. })
  18. </script>

第二中方式:$.each():

  $.each(selector,function(index,object)):

  • selector代表含有json对象的值
  • index代表下标数字从0开始
  • object代表当前对象
  1. <script type="text/javascript">
  2. $("#select").click(function () {
  3. $.ajax({
  4. url:'/test',
  5. type:'get',
  6. contentType: 'application/x-www-form-urlencoded; charset=utf-8',
  7. dataType:'json',
  8. success:function (data) {
  9. $("#tb").empty();
  10. var htm = "";
  11. $.each(data,function (index,obj) {
  12. htm+="<tr><td>"+obj.type_id+"</td><td>"+obj.type_name+"</td><td>"+obj.type_describe+"</td></tr>";
  13. })
  14. $("#tb").append(htm);
  15. }
  16. })
  17. })
  18. </script>

 

正文到此结束
该篇文章的评论功能已被站长关闭
本文目录