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

使用jQuery完成跨域请求

2015-05-29 15:58 721 查看

以下HTML代码可以完成的功能：

1. 无需部署到Web服务器，直接双击该HTML文件，即可向yourUrl（在js代码第一行）所在的服务器请求json数据；

2. 解析得到的json数据，用Bootstrap自带的翻页工具，生成可以翻页的表格，效果如下图；

3. 由于Bootsrap是响应式设计，该表格在手机、平板、PC上都有良好的表现；

[code]<!DOCTYPE html>
<html lang=zh-CN class=sp>

<head>
    <meta charset=utf-8>
    <title>使用Jquery进行跨域请求，使用 Bootstrap Table 动态生成表格</title>
    <meta name=description content="">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel=stylesheet href="styles/vendor.css">
    <link rel=stylesheet href="styles/main.css">
    <script src="scripts/vendor/modernizr.js"></script>
    <script src="scripts/vendor.js"></script>
    <script src="scripts/bootstrap-paginator.min.js"></script>

<body> <!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<header class=header>
    <div class=container-fluid>
        <h1 style="color:white;">使用Jquery进行跨域请求，使用 Bootstrap Table 以分页的形式动态生成表格</h1>
    </div>
</header>
<section id="gauge">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-4 col-wendu"><h2 class=wendu><span>DEMO</span></h2></div>
            <div class="col-xs-4 col-warning"><span class=" pull-right"></span></div>
        </div>
        <div class="row row-main-gauge">
            <p></p>

            <div class="col-xs-12">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>时间</th>
                            <th>标题1</th>
                            <th>标题2</th>
                            <th>标题3</th>
                            <th>标题4</th>
                            <th>标题5</th>
                            <th>标题6</th>

                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
            </div>

        </div>
        <div id="pagination" class="row">
    </div>

    </div>
</section>

<script type="text/javascript">
    var baseUrl = "yourUrl",
            pagesize = 10;
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    var queryCallback = function (data) {
        var s = "";
        data.forEach(function (val, i) {

            // 当前时间，格式为yyyy-MM-dd hh:mm:ss
            var times = new Date(val.date).Format("yyyy-MM-dd hh:mm:ss");

            // 根据返回的json，拼接table的tbody，json格式为{"key1":xx,"key2":yy, ...}
            s += "<tr><td>" + times + "</td><td>" + val.key1 + "</td><td>" + val.key2 + "</td><td>" + val.key3 + "</td><td>" + val.key4 + "</td><td>" + val.key5 + "</td><td>" + val.key6 + "</td></tr>"
        })
        $(".table tbody").html(s);
    }

    var init = function (page) {
        $.getJSON(baseUrl, {"page": page, "pagesize": pagesize}).done(function (data) {
            if (data.values && data.values.length) {
                queryCallback(data.values);
            }
        })
    }

    $(document).ready(function () {
        $.getJSON(baseUrl, {page: 1, pagesize: 10}).done(function (data) {
            if (data.values && data.values.length) {
                queryCallback(data.values);
                var options = {
                    currentPage: 1,
                    totalPages: Math.ceil(data.total / pagesize),
                    size: "normal",
                    alignment: "left",
                    onPageClicked: function (event, originalEvent, type, page) {
                        init(page);
                    }
                }

                $('#pagination').bootstrapPaginator(options);
            }
        })
    })

</script>

这是本人正在维护的一个关于眼睛护理的微信公众账号，专注IT白领人群，免费发布实用有趣的护眼知识，欢迎关注。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航