Jquery解析Json数据

JSP文件

 

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'listUser.jsp' starting page</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->

   <script language="javascript" src="../js/jquery.js"></script>  
    <script language="javascript" src="../js/json.js"></script> 
   
   
    <script language="javascript">  
    function jsonview(){  
        $.getJSON("/userServlet",null,function call(data){  
         wirteHtml(data);  
     });
    }  
   
    function wirteHtml(data){   
 
        
        方法一
        /*
        var continents = data.users;  
       
        for(var i=0;i<continents.length;i++){   
                    
             var newLine = $("#planTable").length;
               
             var row = planTable.insertRow(newLine);  
            
             var col = row.insertCell(0);               
             col.innerHTML = continents[i].name;
               
             col = row.insertCell(1);  
             col.innerHTML = continents[i].age;  
            
             col = row.insertCell(2);  
             col.innerHTML = continents[i].tel;  
        }
        */
       
       
        //方法二
        var list = data.users;
        //alert(list.length);
       
        
        $.each(list, function(i, u){
         
         var row = $("#template_0").clone();
         row.find("#name").text(u.name);
         row.find("#age").text(u.age);
         row.find("#tel").text(u.tel);
         row.find("#address").text(u.address.province+u.address.city+u.address.country);
         
         
         row.appendTo("#planTable");

         
        }); 
       
    }   
    
            
</script>


  </head>
 
  <body>
   
   
    <input type="button" value="JsonView" onClick="jsonview();">  
   
    <div id="dateMessage">  
        <table id="planTable" border="1">  
         <thead>
             <td>Name</td>
             <td>Age</td>
             <td>Tel</td>
             <td>Address</td>
            </thead>  
           
            <tbody id="template">
            <tr id="template_0">
             <td id="name"></td>
             <td id="age"></td>
             <td id="tel"></td>
             <td id="address"></td>
            </tr>  
            </tbody>
           
        </table>  
    </div>
   

    <input type="button" value="Get Xml" οnclick="getXml();">  
    
  </body>
</html>

 

Java文件

 

package com.zj.user.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import com.zj.user.bean.Address;
import com.zj.user.bean.Userinfo;

 

public class UserServlet extends HttpServlet {

 @Override
 protected void doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  this.doPost(req, resp);
 }

 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  
  
     resp.setContentType("text/xml;charset=utf-8");
     resp.setHeader("Cache-Control","no-cache");
    

     //跨域

     String callback = request.getParameter("callback");


     JSONObject json = new JSONObject();  

    
     try{
      
      Userinfo user1=new Userinfo();
      user1.setAddress(new Address("广东省","广州市","天河区"));
      user1.setName("张三");
      user1.setTel("13711486870");
      user1.setAge(22);
      
      Userinfo user2=new Userinfo();
      user2.setAddress(new Address("广西省","南宁市","南区"));
      user2.setName("李四");
      user2.setTel("13711485470");
      user2.setAge(32);
      
      Userinfo user3=new Userinfo();
      user3.setAddress(new Address("湖北省","武汉市","洪山区"));
      user3.setName("王五");
      user3.setTel("1371854786870");
      user3.setAge(28);
      
      List list=new ArrayList();
      list.add(user1);
      list.add(user2);
      list.add(user3);
      
      
      try {
       
       //取集合
    JSONArray jsonArray = JSONArray.fromObject(list);
 
    JSONObject jsobjcet = new JSONObject();
    
    jsobjcet.put("users", jsonArray);
    
    response.getWriter().write(callback+"("+jsobjcet.toString()+");");


    System.out.println(jsobjcet.toString());
    
   } catch (IOException e) {
    e.printStackTrace();
   }
   

    

  
 }

 
}

 

注意

要加入的jar包

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

 

完整实例请参考附件

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值