使用ajax技术无刷新动态调用股票信息

最新推荐文章于 2024-05-16 19:37:25 发布
杰锋
最新推荐文章于 2024-05-16 19:37:25 发布
阅读量507
点赞数
分类专栏： AJAX 文章标签： ajax function input table button border
AJAX 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<html>
<head>
    <title>ajax test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">...
    function ajaxRequest()...{
        var url = $("#stockurl").val() + $("#stockinit").val();
        $.ajax(...{
            url: url,
            type: 'GET',
            dataType: 'html',
            timeout: 2000,
            success: function(response)...{
                var stocks = response.split(';');
                for(var i=0; i<stocks.length-1; i++)...{                    
                    var content = stocks[i];
                    var temp1 = content.split('=')[0];
                    var temp2 = content.split('=')[1];
                    var code = temp1.substr(temp1.length - 6, 6);
                    var temp3 = temp2.replace('"', '');
                    var name = temp3.split(',')[0];
                    var tday_f = temp3.split(',')[1];
                    var yest_f = temp3.split(',')[2];
                    var curr_f = temp3.split(',')[3];
                    var temp_f = curr_f - yest_f;
        
                    $('#a'+i).html(code);
                    $('#b'+i).html(name);
                    if(curr_f > yest_f) ...{
                        $('#c'+i).html("<font color='red'>" + curr_f + "</font>");
                    } else if(curr_f < yest_f) ...{
                        $('#c'+i).html("<font color='green'>" + curr_f + "</font>");
                    } else ...{
                        $('#c'+i).html(curr_f);
                    }
                    $('#d'+i).html(tday_f);
                    $('#e'+i).html(yest_f);
                    if(temp_f > 0) ...{
                        $('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>");
                        $('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
                    } else if(temp_f < 0) ...{
                        $('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>");
                        $('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % ");
                    } else ...{
                        $('#f'+i).html(temp_f.toFixed(2));
                        $('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");
                    }
                    $('#h'+i).html(temp3.split(',')[4]);
                    $('#i'+i).html(temp3.split(',')[5]);
                }
            }
        });
    }

    $(document).ready(function()...{
    
        var stocks = $("#stockinit").val().split(',');
        for(var i=0; i<stocks.length; i++)...{
            addRows();
        }
        
        $("#insrow").click(function()...{
        
            var stockcd = $("#stockid").val();
            if(stockcd == "")...{
                alert("股票代号不能为空！");
                $("#stockid").focus();
                return;
            }
            if(stockcd.length != 6)...{
                alert("股票代号只能是6位！");
                $("#stockid").focus();
                return;
            }
            var div = 'sh';
            if(document.getElementById("sz_id").checked)...{ div = "sz";}
            var stocks = $("#stockinit").val();
            $("#stockinit").val(stocks + "," + div + stockcd);
            addRows();
        });
        
        $("#delrow").click(function()...{
            var table = document.getElementById("tableId");
            var index = table.rows.length;
            if (index < 2)...{
                alert("已经没有可删除的行了!");
            } else ...{
                table.deleteRow(index - 1);
                var stockvalue = $("#stockinit").val();
                var count = stockvalue.split(',').length;
                if(count == 1) ...{
                    stockvalue = "";
                } else ...{
                    stockvalue = stockvalue.substr(0, stockvalue.length - 9);
                }
                $("#stockinit").val(stockvalue);
            }
        });
        
        window.setInterval("ajaxRequest()",3000); 
    });
    
    function addRows()...{
        var table = document.getElementById("tableId");
        var index = table.rows.length;
        var str="";
        var row = index - 1;
        str+='<tr class="tr_cls">'
        str+='<td align="center"><span id="' + "a" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "b" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "c" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "d" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "e" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "f" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "g" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "h" + row + '"></span></td>'
        str+='<td align="center"><span id="' + "i" + row + '"></span></td>'
        str+='</tr>';
        $("#tablebody").append(str);
    }
    </script>
    <style>...
    .tr_cls {...}{
        height:30px;
        font-size:16px;
        font-family:"Times New Roman", Times, serif;
        background-color:#FFFFCC
    }
    </style>
</head>
<body>
    <form>
        <input type="hidden" id="stockurl" value="http://hq.sinajs.cn/list=" />
        <input type="hidden" id="stockinit" value="sh000001,sz399001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601857,sz000532,sh600019,sh601111,sh601600,sh601006,sh601333,sh601398,sh601988,sh601328" />
        <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" >
            <tr>
                <td width="115px">
                    代号:<input type="text" id="stockid" size="6">
                </td>
                <td width="150px">
                    区分:上海<input type="radio" name="rad" id="sh_id" checked>深证<input type="radio" name="rad" id="sz_id">
                </td>
                <td width="40px">
                    <input type="button" id="insrow" value="行追加">
                </td>
                <td width="495px">
                    <input type="button" id="delrow" value="行削除">
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div style="overflow-y:scroll; overflow-x:auto; height:392px; width:817px">
                        <table id="tableId" width="800" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
                            <tr bgcolor="#3399FF" height="30px">
                                <th scope="col">股票代号</th>
                                <th scope="col">股票名称</th>
                                <th scope="col">当前价格</th>
                                <th scope="col">今日开盘</th>
                                <th scope="col">昨日收盘</th>
                                <th scope="col">当前差价</th>
                                <th scope="col">涨跌幅度</th>
                                <th scope="col">最高价格</th>
                                <th scope="col">最低价格</th>
                            </tr>
                            <tbody id="tablebody">
                            </tbody>
                        </table>    
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
杰锋
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用ajax技术无刷新动态调用股票信息

ajax test ... function ajaxRequest()...{ var url = $("#stockurl").val() + $("#stockinit").val(); $.ajax(...{ url: url, type: 'GET',
复制链接

扫一扫