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

浏览数：26 / 时间：2015年06月09日

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>