js ajax获取api数据库,JS基础 ajax接入新浪API获取股票信息并无刷新更新数据

JS基础 ajax接入新浪API获取股票信息并无刷新更新数据

完成目标需要的：HTML、JavaScript、JQuery(ajax)、canvas(做折线图)

那么主体框架：

请输入股票代码，并稍等片刻

股票代码:

当前股价:

查询次数:

获取信息

接下来实现功能：ajax请求新浪股票接口

这是新浪提供的接口，${num}部分就是要查询的股票代码

http://qt.gtimg.cn/q=${num}

为实现无刷新更新数据，需要用到ajax，ajax基于JQ，所以之前引入了JQ的包

function Ajax(){

let num=document.getElementById("field1").value;

$.ajax({

url: `http://qt.gtimg.cn/q=${num}`,

method: 'get',

async:false,

success:function(res) {

let message = res.split('~');

date=message[3];

}

})

用document.getElementById().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()

{

document.getElementById("field2").value=date;

}

```function times(){

Times++;

document.getElementById("d").innerHTML = "已查询";

document.getElementById("field3").value=Times;

}

将更新的数据赋值给只读input标签

接下来是绘制折线图

直接贴代码

var canvas=document.getElementById('mc');

//创建一个画布对象

var ctx=canvas.getContext('2d');

var x=30;

var y=0;

ctx.beginPath();

//坐标轴

ctx.moveTo(30,20);

ctx.lineWidth="1";

ctx.lineTo(30,480);

ctx.lineTo(900,480);

//ctx.closePath();

//横线

ctx.strokeStyle="#999";

for(var i=0;i<9;i++)

{

ctx.moveTo(30,30+50*i);

ctx.lineTo(900,30+50*i);

}

}

canvas相关知识我也没学过，在别处找一个实例，多试几次就知道这几个方法怎么用了

在绘制好横线，确定好坐标轴后，需要根据date的值绘制折线，由于查询的股票价格各异，所以我将起点的纵坐标设置在260(大概画布中间部分)，然后根据date和lastdate(上一次查询的价格)之差来控制折线图，坐标差是价格差的400倍。

//折线

function draw(){

y=lastdate-date;

ctx.moveTo(x,260);

ctx.lineTo(x+10,260+400*y);

ctx.stroke();

x=x+10;

lastdate=date;

}

lastdate也是全局变量，在点击查询按钮后，将会有一个将第一次查询的date赋值给lastdate的操作，这样就能保证绘制第一个点时从起点开始，尔后lastdate的值是上一次date的值，取得价格差。

最后一步，让这些功能函数在点击查询后定时调用

function show()

{

document.getElementById("d").innerHTML = "请稍等";

window.setInterval("Ajax()",3000);

lastdate=date;//设置lastdate初始值

window.setInterval("draw()",3000);

window.setInterval("copyText()",3000);

window.setInterval("times()",3000);

}

每隔3s更新一次数据的页面完成

下面是demo

好吧，测试的时候收盘了，所以价格没有浮动，功能确实实现了，但存在画布用完后，后面的折线图就看不到了，由于没有学过canvas的知识所以后面再改进吧，也有建议说用echarts作图更方便，后面再慢慢学吧。刚接触前端，敬请指正。