ajax利用json进行服务器与客户端的通信
1.JQuery中$.ajax()方法参数详解
http://blog.sina.com.cn/s/blog_4f925fc30100la36.html
2.服务器端获取String que=request.getParameter("que");
3.客户端请求完整代码（highcharts）。
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>-->
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
$(function() {
//$("input[type=button]").bind("click", showChart);
//alert('error!');
$('#show-button').on('click', function(e) {
showChart();
}); $('#clear-button').on('click', function(e) {
clearPlot();
});
}); var chart; function clearPlot() {
//console.log("clear plot data!!!");
var series = chart.series;
while (series.length > 0) {
series[0].remove(false);
}
chart.redraw();
};
function showChart() {
$.ajax({
url : "servlet/Charts",
type : "POST",
dataType : "json",
data : {
"que" : $("#inputque").val()
}, success : function(data) {
var json = eval(data);
if (json != "" && json != null) {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line'
},
title : {
text : '话题趋势分析'
},
subtitle : {
text : ''
},
xAxis : {
categories : json.categories
},
yAxis : {
title : {
text : '百分比 (%)'
},
min : 0
},
plotOptions : {
line : {
dataLabels : {
enabled : true
},
enableMouseTracking : true
}
},
tooltip : {
formatter : function() {
return '<b>' + this.series.name
+ '</b><br/>' + this.x + ': '
+ this.y + ' 次';
}
},
series : json.series
}); chart.settitle(null,null,true);
} },
error : function() {
alert('error!');
} }); }
</script> <div style="margin:auto;text-align:center;">
<div style="padding:10px;">
<input type="text" name="que" id="inputque"> <input
type="button" id="show-button" value=" Test Highcharts " /> <input
type="button" id="clear-button" value="clean" />
</div> <div id="container"
style="height:480px;width:980px;background-color:#efefef;"></div>
</div>
</body>
</html>
ajax利用json进行服务器与客户端的通信的更多相关文章
- 基于 HTML5 WebGL 的 3D 服务器与客户端的通信
这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...
- Socket通信——服务器和客户端相互通信
所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求. Socket和S ...
- C#利用服务器实现客户端之间通信
这两天在学习C#,C#高级编程真的是厚厚的一本书QAQ. 昨天看了一下里面的通信部分(其实还没怎么看),看了网上一些人的博客,自己在他们的博客基础上写了一个通信. 先来讲述下我自己对于整个Socket ...
- Redis服务器和客户端的通信
Redis客户端使用RESP(Redis序列化协议)与Redis服务器进行通信,RESP在位于TCP之上,而网络模型上客户端和服务器是保持的双工的连接.如图1 而一个简单的请求/响应的串行通信模型如下 ...
- nodejs+expressjs+ws实现了websocket即时通讯,服务器和客户端互相通信
nodejs代码 // 导入WebSocket模块: const WebSocket = require('ws'); // 引用Server类: const WebSocketServer = We ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- Python 绝技 —— TCP服务器与客户端
i春秋作家:wasrehpic 0×00 前言 「网络」一直以来都是黑客最热衷的竞技场.数据在网络中肆意传播:主机扫描.代码注入.网络嗅探.数据篡改重放.拒绝服务攻击……黑客的功底越深厚,能做的就越多 ...
- ajaxl利用json 传送数据的 三种提交方式？
一.在servlet类中添加几个javabean对象,放置数据. package com.aaa.servlet; import java.io.IOException; import java.ut ...
- GATT两个角色 服务器与客户端
两个设备应用数据的通信是通过协议栈的GATT层实现的. 从GATT角度来看,当两个设备建立连接后,他们处于以下两种角色之一: GATT服务器: 它是为GATT客户端提供数据服务的设备 GATT客户端: ...
随机推荐
- 【python】pathlib库
pathlib在python3.2以上开始默认支持,在python2.7中如果要使用需要安装 pip install pathlib pathlib更多参考资料:http://pathlib.read ...
- Markdown 语法速查表
Markdown 语法速查表 1 标题与文字格式 标题 # 这是 H1 <一级标题> ## 这是 H2 <二级标题> ###### 这是 H6 <六级标题> 文 ...
- c# 正则表达式 匹配回车
1 "." 匹配除 "\n" 之外的任何单个字符,一般用".*?"匹配不包括回车的任意字符. 2 我们在用正则表达式分析html或者是xml ...
- IDE整理
1.eclipse 下载地址:http://www.eclipse.org/downloads/ 2.myeclipse 下载地址:http://www.myeclipseide.com/mo ...
- loadingDialog
1.dialog布局 dialog_loading.xml <?xml version="1.0" encoding="utf-8"?> <L ...
- C++程序设计课程学习的网址
很详细 C++程序设计课程主页 http://blog.csdn.net/sxhelijian/article/details/7910565 孙鑫C++视频教程 rmvb格式 全20CD完整版 ...
- Gym 100463A Crossings 逆序对
Crossings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463 Description ...
- 电赛总结（二）——AD芯片总结之AD7705
1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...
- 监控Spark应用方法简介
监控Spark应用有很多种方法. Web接口每一个SparkContext启动一个web UI用来展示应用相关的一些非常有用的信息,默认在4040端口.这些信息包括: 任务和调度状态的列表RDD大小和 ...
- 关于Scala JDK与IDEA版本兼容的问题
文章来自:http://www.cnblogs.com/hark0623/p/4174652.html 转发请注明 我刚装上Scala和IDEA时发现运行代码后总是出现 xxx is already ...