使用jQuery ajax请求json数据

使用jQuery ajax请求json数据,并填充到html页面

html引用了名为mermoni.js的js文件，该文件用于编写ajax请求,该页面的部分内容如下：

<table id="maincontent" width="100%" cellspacing="0" cellpadding="0" class="maincontent">
                            <tr>
                                <td class="totalhead" style="color: Yellow;">
                                    商品码
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    商品名
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    卖价
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    买价
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    每手的量
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    汇率
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    保证金类型
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    保证金明细
                                </td>
                                <td class="totalhead" style="color: Yellow;">
                                    跨度
                                </td>
                            </tr>
                        </table>

页面中包含id为maincontent的table元素,它将作为填充json数据的容器,
mermoni.js文件的源码如下:
$(function () {
    var initRecord = -1; var randomCode = 0; var oldrandomCode = 0;
    var initialfn = function () {
        randomCode = parseInt(Math.random() * 10000);
        oldrandomCode = parseInt(Math.random() * 10000);
        $.ajax({
            url: "../../ajaxhandler/dataupdate.ashx?" + randomCode + "=" + oldrandomCode,
            type: "get",
            dataType: "json",
            success: function (data, textStatus, XMLHttpRequest) {
                if (textStatus == "success") {
                    if (initRecord != -1) {
                        for (var k = 0; k < data.rows.length; k++) {
                            for (var h = 2; h < 4; h++) {
                                var slct = "#maincontent tr:not(:first):eq(" + k + ") td:eq(" + h + ")";
                                if (data.rows[k].cell[h].toString() != $(slct).text()) {
                                    if (parseFloat(data.rows[k].cell[h]) > parseFloat($(slct).text())) {
                                        $(slct).removeClass();
                                        $(slct).addClass("zhang");
                                    }
                                    else if (parseFloat(data.rows[k].cell[h]) < parseFloat($(slct).text())) {
                                        $(slct).removeClass();
                                        $(slct).addClass("die");
                                    }
                                    $(slct).text(data.rows[k].cell[h]);
                                }
                            }
                        }
                    } else {
                        $("#maincontent tr:not(:first)").remove();
                        for (var i = 0; i < data.rows.length; i++) {
                            var tr = $("<tr/>");
                            tr.hover(
                                function () { $(this).addClass("highlight"); },
                                function () { $(this).removeClass("highlight"); }
                            );
                            for (var j = 0; j < data.rows[i].cell.length; j++) {
                               $("<td/>").addClass("maincontenttd").text(data.rows[i].cell[j]).appendTo(tr);
                            }
                            $("#maincontent").append(tr);
                        }
                        initRecord = 1;
                    }
                }
            },
            error: function () { }
        });
        setTimeout(initialfn, 1500);
    }
    window.onload = initialfn;
});

该段代码initRecord用于记录是否首次请求json数据,randomCode与oldrandomCode确保了每次ajax请求都不会被缓存,这里jQuery ajax中存在缓存的问题,可能使得请求得不到最新json数据,if (initRecord != -1) 结构块中的代码,表示若不是首次请求,则循环获得的json数据行,并通过jQuery选择html页面中相应的表格单元格数据与json存储的相应位置的数据进行对比,这里只选择了可能需要实时变动的第2到第4个单元格数据,由于是数字类型数据,若不相等[大于或小于],则表示有变动更改相应单元格文本并添加相应的类样式以提醒用户,else结构块的代码则显然是将json数据解析出来并在表格容易中添加新行,这里hover方法仅仅是jQuery的一个方法,仅作用于页面的美观.

 

json数据如下:

{rows:[

{cell:["SLV","君泰银[1*2500盎司]","222.00","222.00","2500","1.00000","定值","6000.00","1.00"]},

{cell:["gold","君泰金[1*100盎司]","33332.22","33332.22","100","1.00000","定值","12000.00","19.50"]}

]}

 

好了:贴出最后效果图:

该实例能够根据卖价与买价的变动来实时展示数据,你会发现页面的加载和运行状态都很好，当然这里仅仅只有两行数据,当数据量较大的情况之下,页面的访问速度和性能将变得不那么可观,但是在web浏览器中,数据量较大显示出来时,用户在浏览器中肯定有一部分是看不到的,在这种情况下:对数据分页,是最好的选择,这里就不再继续,分页的方式我也有实现,也许以后我会继续介绍,将在此例的基础上添加分页实现,真正实现不受数据容量影响的实时页面数据展示.