JS基础 ajax接入新浪API获取股票信息并无刷新更新数据
完成目标需要的：HTML、JavaScript、JQuery(ajax)、canvas(做折线图)
那么主体框架：
请输入股票代码，并稍等片刻
股票代码:
当前股价:
查询次数:
获取信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
接下来实现功能：ajax请求新浪股票接口
这是新浪提供的接口，${num}部分就是要查询的股票代码
=${num}
为实现无刷新更新数据，需要用到ajax，ajax基于JQ，所以之前引入了JQ的包
function Ajax(){
let num&#ElementById("field1").value;
$.ajax({ url: `=${num}`, method: 'get', async:false, success:function(res) { let message = res.split('~'); date=message[3]; } })1
2
3
4
5
6
7
8
9
10
11
12
用ElementById().value取到输入框里的股票代码，拼接到url。
这里要注意ajax默认是异步请求，需要把async属性设为false。
异步请求即请求成功前，浏览器会运行后面的脚本，用户也能进行其他操作，同步请求会在请求成功前锁住浏览器，直到请求成功后再向下运行。由于本实例通过window.setInterval()来控制函数定时调用，所以必须等待请求到的数据才能进行后续步骤，固设置为同步请求。
新浪提供的这个接口返回的信息是这样的形式：
v_sh688026=“1洁特生物68802662.4659.9958.86177983794070183913662.4636062.4520062.4460062.4220062.4170062.4750062.48300062.501021062.6075062.70500202101191119252.474.1263.3058.5062.46/1779837/1094007341779837109407.4941.1963.3058.508.0014.8362.467.7471.9947.991.19-1290061.4736.2594.42-1.5710940.07340.00000AGP-A-KCB30.72~~0.8018.8016.33”;
这些数据包括股票名称、开盘价收盘价之类的，我们只需要知道第四组数据62.46是当前股价就可以了。
接下来用split(’~’)将字符串分段为数组，取message[3]，第四段数据赋值给全局变量date。date将作为后续步骤显示和绘图的参考数据。
拿到数据，需要呈现在网页上，有以下几个函数：
function copyText()
{
}
```function times(){
Times++;
}1
2
3
4
5
6
7
8
9
10
将更新的数据赋值给只读input标签
接下来是绘制折线图
直接贴代码
var canvas&#ElementById('mc');
//创建一个画布对象
var ctx&#Context('2d');
var x=30;
var y=0; ctx.beginPath(); //坐标轴
ctx.lineWidth="1";
ctx.lineTo(30,480);
ctx.lineTo(900,480);
//ctx.closePath(); //横线
ctx.strokeStyle="#999";
for(var i=0;i<9;i++)
{ veTo(30,30+50*i); ctx.lineTo(900,30+50*i);
} } 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
canvas相关知识我也没学过，在别处找一个实例，多试几次就知道这几个方法怎么用了
在绘制好横线，确定好坐标轴后，需要根据date的值绘制折线，由于查询的股票价格各异，所以我将起点的纵坐标设置在260(大概画布中间部分)，然后根据date和lastdate(上一次查询的价格)之差来控制折线图，坐标差是价格差的400倍。
//折线
function draw(){ y=lastdate-date;
ctx.lineTo(x+10,260+400*y); ctx.stroke();
x=x+10;
lastdate=date;
}1
2
3
4
5
6
7
8
9
10
lastdate也是全局变量，在点击查询按钮后，将会有一个将第一次查询的date赋值给lastdate的操作，这样就能保证绘制第一个点时从起点开始，尔后lastdate的值是上一次date的值，取得价格差。
最后一步，让这些功能函数在点击查询后定时调用
function show()
{
window.setInterval("Ajax()",3000);
lastdate=date;//设置lastdate初始值 window.setInterval("draw()",3000);
window.setInterval("copyText()",3000);
window.setInterval("times()",3000);
}1
2
3
4
5
6
7
8
9
每隔3s更新一次数据的页面完成
下面是demo
好吧，测试的时候收盘了，所以价格没有浮动，功能确实实现了，但存在画布用完后，后面的折线图就看不到了，由于没有学过canvas的知识所以后面再改进吧，也有建议说用echarts作图更方便，后面再慢慢学吧。刚接触前端，敬请指正。
文章来源: blog.csdn，作者：epicf，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn/epicf/article/details/112801595
本文发布于:2024-01-30 22:20:56，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170662445723237.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
