echarts前台取json,后台asp生成json

前台新建一个页面如1.html,下载个json2.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/echarts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/json2.js"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1100px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
			color: ['#069'],
            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_json.asp",    //请求发送到TestServlet处
         data : {},
         dataType : "json",        //返回数据形式为json
         success : function(result) {			 
             //请求成功时执行该函数内容,result即为服务器返回的json对象
			 if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i].name);    //挨个取出类别并填入类别数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i].num);    //挨个取出销量并填入销量数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({ 
					color: ['#069'],
           			 title: {
                		text: '数据汇聚'
            			},
            			tooltip: {},
            			legend: {
               			 data:['数量']
           				 },       //加载数据图表
                         xAxis: {
                            data: names
                        },
						yAxis: {},
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '数量',
                            type: 'bar',
                            data: nums
                        }]
                    });
                    
             }
         
        },
         error : function(errorMsg) {
             //请求失败时执行该函数
         alert("图表请求数据失败!");
         myChart.hideLoading();
         }
    })
    </script>
</body>
</html>

asp后台代码要下载个json.asp

创建index_json.asp文件

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 

<!--#include file= "json.asp" -->
<% 
db="site.mdb"
dim conn,connstr,db,str
	
	set conn=Server.CreateObject("ADODB.CONNECTION")	
	connstr="Provider=Microsoft.Jet.OLEDB.4.0;data Source="&Server.MapPath(db)
	conn.open connstr
	set rs=server.CreateObject("adodb.recordset") 
	sqlstr="select top 10 * from shuju where num>0 order by num desc,id asc" 
	rs.open sqlstr,conn,1,3
	Set jsa = jsArray()
	while not rs.eof 
	 Set jsa(Null) = jsObject()
                For Each col In rs.Fields
                        jsa(Null)(col.Name) = col.Value
                Next
	
	rs.movenext  
	wend
	
	rs.close 
	conn.close 
	set rs=nothing 
	set conn=nothing 
	Set QueryToJSON = jsa
	Response.Write(QueryToJSON.Flush)
%>

数据库新建一张表shuju

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
Asp 这个老古懂估计没几个人在用了。几年没写代码了,最近要弄个小东西,给手机端提供json数据,不想麻烦别人,自己又只会asp,没办法就自己动手了。网上找了好久都没有一个人能完整的把asp操作json说清楚。最后还是自己搞定的。整出来共享给大家。(ps,还有个原因csdn的分不够用啦,大家看着给点吧。写这个说明文档都用了我两小时。^_^) 以下是示例代码 '说明:json.asp中引用了json.js.asp '其他见文档 '手机很多时候不认gb2312,跳入json的坑就忘记gb2312吧,讨厌的是,如果代码报错,iis会输出gb2312,结果就是乱码,有点烦。 '自己想办法解决吧 response.Charset= "utf-8" dim strJsonData,ovbJson,j dim arrTemp,varname ,i set ovbJson=new vbJson 'asp recrodset和数组转json字符 arrTemp=array("a","{""oa"":""我是oa""}","c") strJsonData=ovbjson.toJson(empty,arrTemp,true) '转换为Json格式的字符串,有兴趣可以自己输出看看是什么 set j=json.parse(strJsonData) '序列化为json对象(或者是数组对象) response.Write(j.get(1)&"") '别用vb数组来存json对象,不然得每个元素去重新序列化,这里如果想j.get(1).oa就不行了。必须对j.get(1)单独序列才行 '----recrodset就不演示了,懒得连数据库 '---自定义操作方法的演示--- strJsonData="{a:1,b:[{c:'我是数组中的点c'}]}" set j=json.parsestr(strJsonData) response.Write(j.b.get(0).c&"") '添加节点的时候注意,如果值是null,会被忽然,这个节点会不存在的。在添加之前记得先检查值 set j=json.add(j,"new","我是新加的节点") response.Write(j.new&"") '下面这句注掉了,是因为这个操作是无效的因为j.b是数组,不能add 'set j=json.add(j.b,"new1","我是加不进的节点") set j.b=j.b.put(j.b.length,j.b.get(0)) response.Write(j.b.get(1).c&",我是新加的数组元素") '因为数组的get方法不允许被赋值,所以不能像下面这样写 'set j.b.get(0)=json.add(j.b.get(0),"new","我会报错") json.add j.b.get(0),"new","我是新加的new我不会报错" json.add j.b.get(0),"new1","我是通过变量出来的哦" response.Write(j.b.get(0).new&"") varname="new1" response.Write(json.byname(j.b.get(0),varname)&"") for i=0 to j.b.length-1 varname="c" response.Write(json.byname(j.b.get(i),varname)&"我是循环出来的c,索引:"&i&" ") next '最后完整的输出给手机就这样: response.Write json.stringify(j)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我在天堂抽烟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值