• 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;980px;background-color:#efefef;"></div>
        </div>
    </body>
    </html>
    View Code
  • 相关阅读:
    linux 下 mysql 常用命令
    极光推送-服务端代码
    spring定时任务表达式
    结合 Redis 实现同步锁
    MySQL 常用函数
    PostgreSQL查询优化逻辑优化之其他
    PostgreSQL查询优化之子查询优化
    PostgreSQL查询优化器之grouping_planner
    PostgreSQL事务实现
    zookeeper ZAB协议 Follower和leader源码分析
  • 原文地址:https://www.cnblogs.com/XDJjy/p/4476107.html
Copyright © 2020-2023  润新知