jquery 遍历hash操作示例【基于ajax交互】


Posted in jQuery onOctober 12, 2019

本文实例讲述了jquery 遍历hash操作。分享给大家供大家参考,具体如下:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运维平台</title>
  <style type="text/css">
    *{margin: 0; padding: 0;}
    body{font-size: 20px; color: #333;}
     h1{position: relative; height: 100px; line-height: 100px; margin: 0; background: #555; color: #f2f2f2; font-size: 25px; text-align: center;}
    ul,ol,li{list-style-type: none;}
    #list{
      margin: 0 auto;
      padding-top: 4px;
    }
    #list ul{
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
    }
 /*+设置框框大小 */
    #list li{
      flex: 1;
      min-width: 100px;
      min-height: 50px;
      margin: 2px 4px;
      padding: 5px 10px;
      border: 1px solid #eee;
    }
    #list .name{
      font-weight: bold;
      font-size: 20px;
    }
    #list .red{
      color: #fff;
      font-weight: bold;
      background: #f00;
      background: rgba(255,0,0,.8);
    }
    #list .red p span{
      color: #fff;
    }
    #list .yellow{
      font-weight: bold;
      background: #ff0;
      background: rgba(255,255,0,.8);
    }
    #list .green{
      background: #0f0;
      background: rgba(0,255,0,.8);
    }
    #list .died{
      background: #666;
      background: rgba(162,162,162,.8);
      color: #fff;
    }
    #list p{
      padding-top: 3px;
    }
    #list p span{
      color: #f00;
      font-weight: bold;
    }
    .time{
      position: absolute; top: 0px; right: 20px;
      color: #fff;
      font-size: 25px;
    }
  </style>
</head>
<body>
  <h1>泰隆银行DB运行监控/60s<span class="time"></span></h1>
  <ul id="list"></ul>
  <!-- <script src="http://libs.mingsixue.com/jquery/1.12.4/jquery.min.js"></script> -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>
  $(function(){
    var renderTime = function() {
      var now = new Date();
      var y = now.getFullYear();
      var m = now.getMonth() + 1;
      var d = now.getDate();
      var h = now.getHours();
      var i = now.getMinutes();
      var s = now.getSeconds();
      m = m < 10 ? '0' + m : m;
      d = d < 10 ? '0' + d : d;
      h = h < 10 ? '0' + h : h;
      i = i < 10 ? '0' + i : i;
      s = s < 10 ? '0' + s : s;
      var _date = y + '-' + m + '-' + d;
      var _time = h + ':' + i + ':' + s;
      $('.time').html(_date + ' ' + _time);
    };
   var render = function(data) {
   console.log('111111111111111111111');
  console.log(data);
  console.log('111111111111111111111');
  for (var k in data){
   console.log('222222222222222222222');
  console.log(k+'=>'+data[k]);
  console.log(data[k]);
  console.log('222222222222222222222');
  for (var p in data[k]){
   console.log('3333333333333333333333');
   console.log(p+'=>'+data[k][p]);
   console.log('3333333333333333333333');
  };
  };
  };
  var getOracleService = function(error) {
      $.ajax({
        url: '/returnmq/',
        type: 'GET',
        data: {},
        async: false,
        dataType: 'json',
        success: function(res) {
          render(res);
        },
        error: function(res) {
         //  alert("数据返回出错");
        }
      });
    }
    getOracleService();
 });
  </script>
</body>
</html>

jquery 遍历hash操作示例【基于ajax交互】

更多关于jQuery相关内容可查看本站专题:《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现影院选座订座效果
Apr 13 jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
jquery将json转为数据字典的实例代码
Oct 11 #jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
jQuery 筛选器简单操作示例
Oct 02 #jQuery
jQuery 查找元素操作实例小结
Oct 02 #jQuery
You might like
PHP句法规则详解 入门学习
2011/11/09 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP常用技巧汇总
2016/03/04 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
深入理解js中this的用法
2016/05/28 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python之py2exe打包工具详解
2017/06/14 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
对python函数签名的方法详解
2019/01/22 Python
Python判断telnet通不通的实例
2019/01/26 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
Python用Jira库来操作Jira
2020/12/28 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
中学优秀班主任事迹材料
2014/05/01 职场文书
仓库管理计划书
2014/05/04 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
MySQL分库分表详情
2021/09/25 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python