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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery 实现扁平式小清新导航
Jul 07 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python简易版图书管理系统
2019/08/12 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
Linux如何为某个操作添加别名
2013/03/01 面试题
多媒体专业自我鉴定
2014/02/28 职场文书
公务员保密承诺书
2014/03/27 职场文书
库房保管员岗位职责
2014/04/07 职场文书
运动会标语
2014/06/21 职场文书
研究生求职自荐书
2014/06/23 职场文书
暑期学习心得体会
2014/09/02 职场文书
新闻稿格式范文
2015/07/18 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Java无向树分析 实现最小高度树
2022/04/09 Javascript