您的位置：首页 > Web前端 > JavaScript

ajax利用json进行服务器与客户端的通信

2015-05-04 14:26 393 查看

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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航