使用jQuery完成跨域请求

以下HTML代码可以完成的功能:
1. 无需部署到Web服务器,直接双击该HTML文件,即可向yourUrl(在js代码第一行)所在的服务器请求json数据;
2. 解析得到的json数据,用Bootstrap自带的翻页工具,生成可以翻页的表格,效果如下图;
3. 由于Bootsrap是响应式设计,该表格在手机、平板、PC上都有良好的表现;

使用jQuery完成跨域请求_第1张图片

<!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白领人群,免费发布实用有趣的护眼知识,欢迎关注。
使用jQuery完成跨域请求_第2张图片

你可能感兴趣的:(jquery,分页,bootstrap,跨域请求)