javascript - 了解 javascript 事件处理和 ajax 请求

Question

我试图通过尝试示例来学习 javascript，但后来放弃了，因为我无法理解事件处理和回调的概念。

这是我要解决的问题。1. 我有一个图表 (highcharts.js) 2. 我期待来自服务器的数据 3. Javascript 将向服务器请求数据点 4. 数据必须附加到图表

我怎样才能做到这一点？你有什么书或文章可以推荐吗？我的困惑主要是，回调如何更新全局对象并进而导致元素刷新？

score 1 · Accepted Answer

使用jQuery，您可以使用调用 $.get() 从服务器获取数据。我不知道您使用的是 API 还是 csv 文件，所以使用 csv 的调用可能是这样的：

$.get('/url/to/file.csv', function (data) {
    $('#container').highcharts({
        data: {
            csv: data
        },
        title : "Some title",
        // etc.
});

不知道是不是你要的东西。我留下了一个可以帮助你的 ajax 示例的链接。

score 1 · Accepted Answer

在您的 html/jsp/php 页面中包含 highcharts.js 和所需的 js 文件
服务器应根据请求向客户端返回 xml 或 JSON 数据（需要在 highcharts 中显示）。在这里，响应标头很重要。
```
 application/json
 text/xml
```

使用 jQuery 的 $.ajax() 函数从服务器获取数据（XML 或 JSON 格式）以在 highcharts 中分配以下值

 xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }


 series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]

在页面加载/任何其他事件时将 highcharts 绑定到 div 容器

 $(document).ready(function(){
     $('#container').highcharts({
         ....
     });
 });

确保网页有容器

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

就这样

javascript - 了解 javascript 事件处理和 ajax 请求

2 回答 2

Related

Reference