简单的模拟股票

最新推荐文章于 2024-07-15 21:50:07 发布

Devil_xkl

最新推荐文章于 2024-07-15 21:50:07 发布

阅读量1.1k

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Devil_lzh/article/details/79392759

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.increase{color: red;}
.decrease{color: green;}
.zero{color: black;}
</style>
</head>
<body>
<table>
<thead>
<tr><th>名称</th><th>价格</th><th>涨跌幅度</th></tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script src="js/jquery.min-1.12.4.js"></script>
<script>
(function(){
// 1. 发出ajax请求
// 2. 把获取到数据进行拼接
// 3. 把拼接好的字符串添加到tbody中，形式新的DOM节点
// 4. 设置定时器，每隔一段时间就向服务器请求获取新的数据

var tbody = $('tbody');
//var tbody = document.querySelector('tbody'); // 原生js
getData();
setInterval(getData, 5000);

function getData(){

//复杂的方法

$.ajax({
url: 'http://localhost:8080/webserver/stock', //IP地址可以改
type: 'get',
success: function(data){
var arr = data.data; // 服务器响的数据
var html = '';
var tmp;
for (var i=0;i<arr.length;i++){
tmp = arr[i];
var className = tmp.unit > 0 ? 'increase' : tmp.unit < 0 ? 'decrease' : 'zero';
html += '<tr><td>' +
tmp.name +
'</td><td class="' + className + '">' +
tmp.now +
'</td><td class="' + className + '">' +
Math.round(tmp.unit * 10000) / 100 +
'%</td></tr>';
}
tbody.html(html);
//tbody.innerHTML = html; // 原生js
},
dataType: 'json', //这里的json 改成 jsonp 因为是跨域同理用get ，post 的也是
error: function(error){
console.log(error)
}
});

//简单的方法

/*$.get('http://localhost:8080/webserver/stock', function(){ //IP地址可以改