這是servlet
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.ServletRequestAttributeEvent;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.jsonFormatVisitors.JsonArrayFormatVisitor;
import jdk.nashorn.internal.runtime.linker.LinkerCallSite;
import net.sf.json.JSONArray;
/**
* Servlet implementation class Process
*/
@WebServlet("/Process")
public class Process extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Process() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
//doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
List<test> list = new ArrayList<test>();
list.add(new test( 20,1 ));
list.add(new test( 10,2 ));
list.add(new test( 30,3 ));
list.add(new test( 25,4 ));
list.add(new test( 50,5 ));
list.add(new test( 5,6 ));
list.add(new test( 15,7 ));
// ObjectMapper mapper = new ObjectMapper();//提供java-json相互轉換的類
// String json = mapper.writeValueAsString(list);
// System.out.println(json);
JSONArray jsonArray = JSONArray.fromObject(list);
response.getWriter().println(jsonArray);
}
}
這是前端
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://bbs.csdn.net/topics/jquery-3.5.1.js"></script>
<script src="https://bbs.csdn.net/topics/echarts.min.js"></script>
</head>
<body>
<!-- 為echarts準備一個具備大小的容器 -->
<div id="graph" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
//基于準備好的dom，初始化ecahrts實體
var myChart = echarts.init(document.getElementById("graph"));
//指定圖示的配置項和資料
myChart.setOption = {
title:{
text:"資料可視化"
},
tooltip: {},
legend: {
left:"right",
data:["濃度"]
},
xAxis:{
data:[]
},
yAxis:{ },
series:[{
name:'濃度',
data:[]
}]
};
var XX = [];//x軸坐標值
var YY = [];//y軸坐標值
//Ajax發起資料請求
$.ajax({
type:'post',
async:true,//異步請求
url:"/Process",
data:{},
dataType: "json",
//請求成功后接受接收資料xtime+yppm兩組資料；
success : function (result) {
alert("asdsad")
//result為服務器回傳的json物件
if(result){
//取出資料存放陣列
for(var i=0;i<result.length;i++)
XX.push(result[i].x);
for(var i=0;i<result.length;i++)
YY.push(result[i].y);
//覆寫操作根據資料加載資料表
myChart.setOption({
xAxis: {data: XX},
series:[{
//name:"濃度",
date:YY
}]
});
}
},
error : function(errorMsg){
//請求失敗時執行該函式
alert("圖示資料請求失敗");
myChart.hideloading();
}
})
</script>
</body>
</html>
這是目錄結構
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/276875.html
標籤：Ajax
下一篇：標簽的顯示順序不對怎么辦