当我们想从服务器获取数据,并根据所得数据在网页上制成图时,大多数情况下要求服务器传递给页面的是一组数据,而非单个数据,我们需要将一个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.οnlοad=getData;
</script>
</body>
</html>