在上一篇博客中，學習了使用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="width: 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;
}
}
}
最終效果：
