`
zhangbaocheng
  • 浏览: 33991 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

使用JSON与jsChart时出现的问题

jsonJavaScriptWebAjax 
阅读更多

当我们想从服务器获取数据，并根据所得数据在网页上制成图时，大多数情况下要求服务器传递给页面的是一组数据，而非单个数据，我们需要将一个List转化为JSON字符串从服务器端传递至客户端。JSON字符串的语法格式为:[{key1:value1,key2:value2, ... ...},{},{}... ...]

 

而在客户端，在使用jsChart根据数据生成图片时，所需数据格式为:(['Jan', 2], ['Feb', 1], ... ...)。

 

很明显如果直接将JSON字符串evalJSON后直接myChart.setDataArray()的话肯定无效。这就需要我们将JSON字符串转换为目标格式。思路是:将jsChart复制所需的数组设计成二维数组, 用二维数组的每一项代表一个数据对象。 参考代码如下:

 

实体类entity.People

package entity;

public class People {
 private String name;
 private double salary;
 
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public double getSalary() {
  return salary;
 }
 public void setSalary(double salary) {
  this.salary = salary;
 }
}

 

 

 

 

用于处理请求的Servlet:Test(访问url为test)

package test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import util.JSONUtils;

import entity.People;

public class Test extends HttpServlet {
 public void service(HttpServletRequest request, 
   HttpServletResponse response)
   throws ServletException, IOException {
  PrintWriter out = response.getWriter();
  List<People> list=new ArrayList<People>();
  for(int i=0;i<10;i++){
   People people=new People();
   people.setName("A"+i);
   people.setSalary(new Random().nextDouble());
   list.add(people);
  }
  out.println(JSONUtils.listToString(list));
  out.flush();
  out.close();
 }

}

 

 

 

 

JSON工具类:

package util;

import java.util.List;

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

public class JSONUtils {
 public static String listToString(List list){
  JSONArray json=JSONArray.fromObject(list);
  String str=json.toString();
  return str;
 }
 public static String objectArrayToString(Object[] obj){
  JSONArray json=JSONArray.fromObject(obj);
  return json.toString();
 }
 public static String objectToString(Object obj){
  JSONObject json=JSONObject.fromObject(obj);
  return json.toString();
 }
}

 

 

 

 

web.xml配置文件

 <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>Test</servlet-name>
    <servlet-class>test.Test</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Test</servlet-name>
    <url-pattern>/test</url-pattern>
  </servlet-mapping>

  

 

 

 

JSP文件

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<html>
 <head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <script type="text/javascript" src="js/prototype1.6.js"></script>
  <script type="text/javascript" src="js/jscharts.js"></script>
 </head>
 <body>
  <a href="index.jsp">返回</a>
  <br />
  <div id="div">加载...</div>
  <script type="text/javascript">
   function getXmlHttpRequest(){
        var xmlHttpRequest = null;
        if ((typeof XMLHttpRequest) != 'undefined'){
         xmlHttpRequest = new XMLHttpRequest();
        }else {
         xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
        }
        return xmlHttpRequest;
   }   
   function getData(){
       xmlReq=getXmlHttpRequest();
       var url="test";
       xmlReq.open("GET",encodeURI(url),true);
       xmlReq.onreadystatechange=function(){
     if(xmlReq.readyState == 4){
      /*注意JSON字符串[{key:value,key1:value1...},{},{}...]
      *转换为JS对象，进而
      *转化为符合jsChart条件([key,value],[key1,value1]...)
      *的数组的过程
      */
      var resText = xmlReq.responseText;
      var temp=resText.evalJSON();
      var array=new Array();
      for(var i=0;i<temp.length;i++){
       var arr=new Array();
       arr[0]=temp[i].name;
       arr[1]=temp[i].salary;
       array[i]=arr;
      }
      var myChart = new JSChart('div', 'line');
      myChart.setDataArray(array);
      myChart.draw();
     }
    }
       xmlReq.send(null);
   }
   window.onload=getData;
  </script>
 </body>
</html>

 

 

 

 

 

分享到：
评论
2 楼 hzxlb910 2013-06-22  
加关注，期告待更多
1 楼 hzxlb910 2013-06-22  
虽然就一篇，但写的还不错哈
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics