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中 DOM节点操作方法大全
Oct 12 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jquery插件实现轮播图效果
Oct 19 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php使用google地图应用实例
2014/12/31 PHP
js类型检查实现代码
2010/10/29 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
javascript canvas封装动态时钟
2020/09/30 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
Python timeit模块的使用实践
2020/01/13 Python
python next()和iter()函数原理解析
2020/02/07 Python
什么是Python包的循环导入
2020/09/08 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
安全教育实施方案
2014/03/02 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
小学数学教研活动总结
2014/07/01 职场文书
研修心得体会
2014/09/04 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
物业保洁员管理制度
2015/08/05 职场文书
教师学习心得体会范文
2016/01/21 职场文书
如何在Python中创建二叉树
2021/03/30 Python