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进行服务器与客户端的通信的更多相关文章

  1. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  2. Socket通信——服务器和客户端相互通信

    所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求.  Socket和S ...

  3. C#利用服务器实现客户端之间通信

    这两天在学习C#,C#高级编程真的是厚厚的一本书QAQ. 昨天看了一下里面的通信部分(其实还没怎么看),看了网上一些人的博客,自己在他们的博客基础上写了一个通信. 先来讲述下我自己对于整个Socket ...

  4. Redis服务器和客户端的通信

    Redis客户端使用RESP(Redis序列化协议)与Redis服务器进行通信,RESP在位于TCP之上,而网络模型上客户端和服务器是保持的双工的连接.如图1 而一个简单的请求/响应的串行通信模型如下 ...

  5. nodejs+expressjs+ws实现了websocket即时通讯,服务器和客户端互相通信

    nodejs代码 // 导入WebSocket模块: const WebSocket = require('ws'); // 引用Server类: const WebSocketServer = We ...

  6. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  7. Python 绝技 —— TCP服务器与客户端

    i春秋作家:wasrehpic 0×00 前言 「网络」一直以来都是黑客最热衷的竞技场.数据在网络中肆意传播:主机扫描.代码注入.网络嗅探.数据篡改重放.拒绝服务攻击……黑客的功底越深厚,能做的就越多 ...

  8. ajaxl利用json 传送数据的 三种提交方式？

    一.在servlet类中添加几个javabean对象,放置数据. package com.aaa.servlet; import java.io.IOException; import java.ut ...

  9. GATT两个角色 服务器与客户端

    两个设备应用数据的通信是通过协议栈的GATT层实现的. 从GATT角度来看,当两个设备建立连接后,他们处于以下两种角色之一: GATT服务器: 它是为GATT客户端提供数据服务的设备 GATT客户端: ...

随机推荐

  1. ts tp 高清播放软件 Elecard MPEG Player 6.0.130827

    Elecard MPEG Player 6.0.130827 计算机配置不高的情况下,流畅播放高清视频. 缺点是搜索时停顿严重. 包里有注册机. 下载地址 http://pan.baidu.com/s ...

  2. Java for LeetCode 034 Search for a Range

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  3. 强制JSP页面刷新，防止被服务器缓存(可用于静态include强制刷新)

    对于jsp页面,为了防止页面被服务器缓存.始终返回同样的结果. 通常的做法是在客户端的url后面加上一个变化的参数,比如加一个当前时间. 我现在使用的方法是在jsp头部添加以下代码: <%    ...

  4. Oracle 性能查看

    http://blog.chinaunix.net/uid-20784775-id-373968.html

  5. hdu 1016 Prime Ring Problem（ＤＦＳ）

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. FileUpload之FileItem

    转自:http://asialee.iteye.com/blog/706079 FileItem类主要是封装了一个File Item或者是FormItem,它的主要的方法如下,需要说明的是对于Form ...

  7. Linux串口设置及编程（转）

    用户常见的数据通信的基本方式可分为并行通信和串行通信. 并行通信是指利用多条数据传输线将一个资料的各位同时传送.特点是传输速度快,适用于短距离通信,但要求传输速度较高的应用场合. 串行通信是指利用一条 ...

  8. Kinect学习笔记（五）——更专业的深度图

           这一节的内容就是把深度图转换为彩色图,然后不再使用硬解码,而是继续采用sdk里面封装好的功能来减少测量的误差,以及避免转换为灰度图时,出现绿巨人时候的掉针的bug.       下面直接 ...

  9. SqlServer2005或2008数据库字典--表结构.sql

    SELECT TOP 100 PERCENT --a.id,       CASE WHEN a.colorder = 1 THEN d.name ELSE '' END AS 表名,       C ...

  10. 使用jQuery实现类似开关按钮的效果

    转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加 ...