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

1.JQuery中$.ajax()方法参数详解

http://blog.sina.com.cn/s/blog_4f925fc30100la36.html

 

2.服务器端获取String que=request.getParameter("que");

 

3.客户端请求完整代码(highcharts)。

ajax利用json进行服务器与客户端的通信
<!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

 

你可能感兴趣的:(Ajax)