echarts html传参+js请求+ashx服务 代码方式
html 头传参方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="/Scripts/jquery-2.1.1.min.js"></script>
<!-- ECHART -->
<script type='text/javascript' src="/Scripts/esl.js"></script>
<script type='text/javascript' src="/Scripts/echarts.js"></script>
<script src="/Scripts/Main.js"></script>
<script src="/Scripts/RealTimeView.js"></script>
</head>
<body>
<div class="tab-pane" id="tab2">
<div id="tab1chart1" class="row" style="height: 300px"></div>
<div id="tab1chart2" class="row" style="height: 300px"></div>
</div>
</body>
</html>
<script>
$(function () {
btnr();
});
</script>
js 处理html参数,并向后台请求
var arg1;
var arg2;
var LocString=String(window.document.location.href);
function getQueryStr(str){
var result = location.search.match(new RegExp("[\?\&]" + str + "=([^\&]+)", "i"));
if (result == null || result.length < 1) {
return "";
}
return result[1];
}
//获取HTTP参数
function receiveParameter() {
arg1 = getQueryStr("arg1");
arg2= getQueryStr("arg2");
}
$.ajax({
"dataType": 'json',
"type": "GET",
async: false,
"url": '/Info.ashx',
"data": { 'arg1': arg1, "arg2": arg2 },
"success": function (json) {
if (json == null) {
myChart1.showLoading({
//返回数据为空
text: ""
});
return;
}
options.xAxis[0].data = json.category;
options.series = json.series;
options.legend.data = json.legend;
options.title.text = '曲线';
myChart1.hideLoading();
myChart1.setOption(options);
},
error: function (errorMsg) {
alert(errorMsg);
}
});
ashx服务返回,经过JavaScriptSerializer转化为JSON
public void ProcessRequest(HttpContext context)
{
try
{
Object infoList =InfoService.GetChart(arg1, arg2);
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.ContentType = "text/plain";
context.Response.Write(js.Serialize(infoList));
}
catch
{
context.Response.ContentType = "text/plain";
context.Response.Write("error");
}
}
echarts html传参+js请求+ashx服务 代码方式的更多相关文章
- 设置 Ext.data.Store 传参的请求方式
设置 Ext.data.Store 传参的请求方式 1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var res ...
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPanel = Ext.create('Ex ...
- 爬虫scrapy组件 请求传参,post请求,中间件
post请求 在scrapy组件使用post请求需要调用 def start_requests(self): 进行传参再回到 yield scrapy.FormRequest(url=url,form ...
- json传参 js前端和java后端 的简单例子
下面讲解了从前端js对象-->json字符串-->java字符串---->java map的过程 1,初始化js对象 var param = {}; param.krel = kre ...
- Flask初学者:URL(传参,请求,重定向)
URL传参: 良好的URL:视图函数对应的url以/结尾是一种良好url,因为用户在访问的时候无论他有没有加上最后这个斜杠,都是能访问到的,相反,视图函数的url没有以/结尾,用户访问的时候却加上了这 ...
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- JS学习笔记(模态框JS传参)
博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...
- SpringMVC前后端分离交互传参详细教程
温故而知新,本文为一时兴起写出,如有错误还请指正 本文后台基于SpringBoot2.5.6编写,前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试,用于理解前后端分离式开发的交互 ...
- web api 初体验之 GET和POST传参
上一篇我们讲到了web api跨域的问题 它几乎是每一个用web api的人都需要去解决的问题,不然都没法测试.接下来会遇到的问题就是传参了.还是用js前台调用服务的方式. GET 方式 get方式传 ...
随机推荐
- 一些用过的C#类库收集
[System.Math] [System.Guid] [System.Management.Automation.RuntimeException] [System.DateTime] [Syste ...
- Linux 计划任务 Crontab 笔记与总结(5)crontab 常见错误与案例
① 环境变量 cd ~ pwd 就会到你登陆的那个用户的根目录下 ls -a 能够查看到 .bash_profile 这个文件 vim .bash_profile 这里面设置了一些环境变量. 可以设置 ...
- Web 在线文件管理器学习笔记与总结(7)重命名文件
rename($oldname,$newname) 重命名文件或目录 <<<EOF EOF; 使用heredoc 技术,来部分实现界面与代码的准分离 重命名时,需要验证新文件名的合法 ...
- 西秦的ACE-Python教程 一、Python本地开发环境部署
西秦的ACE-Python教程 一.Python本地开发环境部署 西秦 级别: 论坛版主 发帖 1357 云币 2782 加关注 写私信 只看楼主 更多操作楼主 发表于: 10-10 ...
- 3D 生物打印血管成功植入恒河猴体内
3D 生物打印血管成功植入恒河猴体内
- Lazarus开发平台编译后的可执行程序的减肥方法
1.在“工程”菜单下,单击“工程选项”,原始状态的界面为: 2.将界面中的两个选项修改为如下: 3.按“确定”按钮,即可 编译以后的可执行程序就将又原来的14m变为1.66m. 1.选择: Proje ...
- 读书笔记——《图解TCP/IP》(2/4)
经典摘抄 第三章 数据链路 1.实际的通信媒介之间处理的却是电压的高低.光的闪灭以及电波的强弱等信号. 2.数据链路层的相关技术:MAC寻址.介质共享.非公有网络.分组交换.环路检测.VLAN等 3. ...
- 通过宏定义判断是否引入的是framework,反之则使用双引号,实用!
例: #if __has_include(<TestHead/TestHead.h>) #import <TestHead/TestHead.h>#else#import &q ...
- Flume协作框架
1.概述 ->flume的三大功能 collecting, aggregating, and moving 收集 聚合 移动 2.框图 3.架构特点 ->on streaming data ...
- insert into hi_user_score set hello_id=74372073,a=10001 on duplicate key update hello_id=74372073, a=10001
insert into hi_user_score set hello_id=74372073,a=10001 on duplicate key update hello_id=74372073, a ...