您的位置:首页 > Web前端 > JQuery

jquery+ajax 读取数据显示列表

2011-01-04 17:24 471 查看
当读取多个不同选项的菜单列表数据时,我们可用 jquery里面的ajax 做异步显示数据,数据查询方法用 .ashx 页面封装。
即减轻了页面大量的html代码和数据加载的负担,也大大增加了友好性。。
具体示例可 参见:http://www.hnxhdh.com/downinfo.aspx
以下是jquery实现的一段代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function getDownInfo(obj, num, count, obj1, num1, _type, _subject, _version) {
        var content_id = "#" + obj + obj1 + num1;
       
        var more = "#" + _type.toLowerCase() + "_more";
        if (_type == "PPT") {
            $(more).attr({ "href": "downList.aspx?tId=" + _version + "&sId=" + _subject + "&Action=PPT" });
        } else if (_type == "Prepara") {
            $(more).attr({ "href": "downList.aspx?PTypeId=" + _version + "&PSubject=" + _subject + "&Action=Prepara" });
        } else if (_type == "Epaper") {
            $(more).attr({ "href": "downList.aspx?EGrade=" + _version + "&ESubjectId=" + _subject + "&Action=Epaper" });
        }
       
       
        var loading_html = "<li>正在获取数据,请稍候...</li>";
        $(content_id).html(loading_html);
       
        $.get("/ajax.ashx", { action: 'get_down_info', type: _type, subject: _subject, version: _version }, function(json) {
           
            if (json == "null") { $(content_id).html("该分类下暂无数据."); return; }
            var return_data = eval(json);
            var str_html = "";
            for (var i = 0; i < return_data.length; i++) {
                str_html += "<li><a href='downDetails.aspx?PId=" + return_data.id + "&Action=" + _type + "'>" + return_data.title + "</a></li>";
            }
            $(content_id).html(str_html);
        });
    }
    function getSVId(_type) {
        var s = "#" + _type + " .ban_t_01";
        var subjectId = $(s).attr("title");
        return subjectId;
    }
    function getVersion(_type) {
        var s = "#" + _type + " .ban_t_01";
        var id = $(s).attr("id");
        var index = id.indexOf("v") + 1;
        return id.substring(index,id.length);
    }
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息