Java網絡爬蟲-5 定義JSP頁面

***********JSP頁面***************
查詢數據的jsp頁面內容:
a標籤: href=”GetDataServlet/selectJobs”>點擊獲取招聘信息
表格:

    <c:forEach items="${jobList}" var="job">
        <tr>
            <td>${job.id}</td>
            <td>${job.jobName}</td>
            <td>${job.company}</td>
            <td style="color:gray;">${job.address}</td>
            <td style="color: red;">${job.salary}</td>
            <td>
                <a href="#">修改</a> |
                <a href="#">刪除</a>
            </td>                       
        </tr>
    </c:forEach>

jsp

用圖狀顯示數據:

<script type="text/javascript">
    // 基於準備好的dom,初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定圖表的配置項和數據
    var option = {
        title: {
            text: '不同薪酬的情況'
        },
        tooltip: {},
        legend: {
            data:['薪資']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '薪資',
            type: 'bar',
            data: []
        }]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);

    // 發起請求
    var xhr = new XMLHttpRequest();
    // 定義url連接
    var url = "GetDataServlet/selectAvgSal";
    // 打開到服務器的連接
    xhr.open("get", url, true);
    // 綁定回調函數
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){// 響應完成
            if(xhr.status == 200){ // 響應正常200 ok
                // 響應回來的text字符串數據
                var data = xhr.responseText;
                // 將字符串轉換爲json對象
                var json = JSON.parse(data);
                //綁定到myChart
                myChart.setOption({
                    xAxis: {
                        data: json.jobNames
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: '平均薪酬',
                        data: json.avgSals
                    }]
                });

            }
        }
    };
    // 發送請求
    xhr.send(null);        
</script>

jsp
由於數據沒有處理好,在圖狀顯示的時候有點瑕疵,望大佬們見諒

項目jar包:
jar

***********END***************

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章