在上一篇博客中，学习了使用javascript和jquery两种方法来进行前后台交互。本篇博客着重利用jquery+echarts来实现从后台取数，从前端echarts中展示。
1.html页面编写：
a.echarts.js导入，jquery框架导入。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/echart/echarts.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/echart/macarons.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>echart demo to ajax+json</title>
</head>b.echarts+ajax脚本编写：
<body>
<div id="main" style=" 600px;height:400px;"></div>
<script type="text/javascript">
var mychart = echarts.init(document.getElementById('main'), 'macarons');
mychart.setOption({
title: {
text: '异步加载数据示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
mychart.showLoading();
var names =[]; //类别数组（实际用来盛放X轴坐标值）
var nums = []; //销量数组（实际用来盛放Y坐标值）
$.ajax({
type: "post",
async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url: "index.aspx?method=getdata",
//url:"Handler.ashx?method=getdata",
data: {},
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
//var json = $.parseJSON(result);
alert(result);
for (var i = 0; i < result.length; i++) {
//alert(result[i].name);
names.push(result[i].names); //挨个取出类别并填入类别数组
}
for (var i = 0; i < result.length; i++) {
nums.push(result[i].nums); //挨个取出销量并填入销量数组
}
mychart.hideLoading(); //隐藏加载动画
mychart.setOption({ //加载数据图表
xAxis: {
data: names
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: nums
}]
});
}
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>2.后台脚本编写（有两种方法：一种使用aspx后台脚本，一种使用一般处理程序ashx）
2.1利用aspx后台脚本：（使用Newtonsoft.dll的jsonconvert方法转换为json字符串）
public partial class index : System.Web.UI.Page
{
List<object> lists = new List<object>();
string result = "";
protected void Page_Load(object sender, EventArgs e)
{
string method = Request.QueryString["method"];
if (!string.IsNullOrEmpty(method))
{
if (method == "getdata")
{
data();
}
}
}
private void data()
{
lists = new List<object>();
var obj = new { names = "yuan", nums = 12 };
var obj1 = new { names = "yuan1", nums = 19 };
lists.Add(obj);
lists.Add(obj1);
object JSONObj = (Object)JsonConvert.SerializeObject(lists);
Response.Write(JSONObj);
// 一定要加，不然前端接收失败
Response.End();
}2.2利用ashx：（利用javascriptSerializer进行序列化传输）
public class Handler : IHttpHandler {
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
string result = "";
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string method = context.Request["method"];
if (!string.IsNullOrEmpty(method))
{
if (method == "getdata")
{
lists = new List<object>();
var obj = new { names = "yuan", nums =12 };
var obj1 = new { names = "yuan1", nums = 19 };
lists.Add(obj);
lists.Add(obj1);
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}
}
//context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
}最终效果：
