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

程序员文章站 2022-03-13 08:30:40

JS基础 ajax接入新浪API获取股票信息并无刷新更新数据完成目标需要的：HTML、JavaScript、JQuery（ajax）、canvas（做折线图）那么主体框架：`请输入股票代码，并稍等片刻`...

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

完成目标需要的：HTML、JavaScript、JQuery（ajax）、canvas（做折线图）
那么主体框架：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="d">请输入股票代码，并稍等片刻</p>
<canvas id="mc" width="900" height="500" style="border:1px solid black"></canvas>
<!--这是画布，为了做折线图（未创建对象）-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--外部引入JQ-->
<br>股票代码:<input id="field1"   ><br>
当前股价: <input type="text" id="field2" value="Hello World!" readonly="readonly" ><br>
查询次数: <input type="text" id="field3" value="0" readonly="readonly" ><br>

<button onclick="show()">获取信息</button>

</body>
</html>

接下来实现功能：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_洁特生物688026_62.4659.99_58.861779837₉₄₀₇₀₁839136_62.46360_62.45200_62.44600_62.42200_62.41700_62.47500_62.483000_62.5010210_62.60750_62.70500~~20210119111925_2.474.12_63.3058.50_{62.46/1779837/109400734}1779837₁₀₉₄₀7.49_41.19_63.3058.50_8.0014.83_62.467.74_71.9947.99_1.19-12900_61.4736.25_94.42~~-1.57_10940.07340.0000₀A_GP-A-KCB30.72~~0.80_18.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标签

接下来是绘制折线图
直接贴代码

</script>
<script type="text/javascript">
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);
		}
		
	
	}
  
</script>

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
JS基础 ajax接入新浪API获取股票信息并无刷新更新数据
好吧，测试的时候收盘了，所以价格没有浮动，功能确实实现了，但存在画布用完后，后面的折线图就看不到了，由于没有学过canvas的知识所以后面再改进吧，也有建议说用echarts作图更方便，后面再慢慢学吧。刚接触前端，敬请指正。

本文地址：https://blog.csdn.net/epicf/article/details/112801595