<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   div#slider-img {width: 100%; height: 250px; top: 45px;}
   </style>
    <script type="text/javascript" charset="UTF-8">
      mui.init();
    </script>
    <script src="js/jquery-1.12.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
       mui.init();
       mui.plusReady(function(){
           mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
           dataType:'json',
           type:'get',//请求方式
           timeout:10000,//超时
           success:function(data){//成功
            dataAnalyze(data);
            },
            error:function(error){//失败
               console.log("返回失败");
             }
          });
        mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR/Msg7TLJv5TjaQQ6Hpjxd+aWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS/PvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6/KXOnxX046I&encryption=1&canal=appstore',{
        dataType:'json',type:'get',timeout:10000, success:function(data){
        listDataAnalyze(data);
        },error:function(error){
        console.log("返回失败"+ error);
        }
        });
  });
 
function dataAnalyze(data){
    var arr = data.T1348647853363[0].ads;
    var finalList = null;
    var imgList = null;
    for(var i = 0; i<arr.length;i++){
     //轮播图标签结构
//    finalList = '<div class="mui-slider-item"><a href="http://www.baidu.com"><p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
finalList = '<div class="mui-slider-item"><a href="#"><img src='+arr[i].imgsrc+'></a></div>';
     //插入slider-img标签里面
      $("div#slider-img").append(finalList);
     //插入轮播标记
     $("#slider-indicator").append('<div class="mui-indicator"></div>');
//     插入完成必须初始化，否则图片不能滚动
     mui('.mui-slider').slider({
     interval:0//自动轮播周期，若为0则不自动播放，默认为0；
      });                  
    }
}
 
function listDataAnalyze(data) {
var listDetail = null;
var arrayobj = data.T1348647853363;
for (var i = 0; i < arrayobj.length;i++) {
console.log(arrayobj[i].title);
listDetail = '<li class="mui-table-view-cell mui-media><a href="#"><div class="mui-media-body">'+arrayobj[i].digest+'</div></a>></li>';
$("#tableView-List").append(listDetail);
}
}
 
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">aJax请求数据</h1>
</header>
 
  <div class="mui-slider " >
            <div class="mui-slider-group" id="slider-img">
              //图片、标题
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator" id="slider-indicator">
            </div>
  </div>
<ul class="mui-table-view" id="tableView-List">
</ul>
</body>
</html>

在mui中创建aJax来请求数据..并展示在页面上的更多相关文章

  1. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  2. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  3. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  4. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  5. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  6. 使用gulp创建ajax模拟请求

    概述 之前一直使用gulp构建前端项目,这个基于node流并崇尚“编程而非配置”的工具让我深深的爱上了他.强大的gulp能做到的不仅仅是压缩和合并js.css,它能做到的还有更多.今天我给大家带来使用 ...

  7. Struts2中通过Ajax传递json数据

    1.导入Struts2所需要的jar包 下载Struts2的jar包时,可以下载struts-2.5.13-min-lib.zip,然后放到项目的/WebContent/WEB-INF/lib路径下s ...

  8. 微信返回上一页，页面中的AJAX的请求，对Get请求无效的解决办法

    问题产生原因       最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...

  9. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

随机推荐

  1. ubuntu禁用super（win）键

    ubuntu在切换输入法使用super + space的时候经常会在按下super的时候弹出luncher,影响操作,解决方法为禁用super启动luncher. 1.安装compizconfig-s ...

  2. Maven常用命令及Eclipse应用

    一般来说,github上大多的java项目都是使用maven,ant等进行构建的.由于之前没有使用过maven,因此这几天对maven进行了简单的学习.古话说:“温故而知新”,一些命令长时间不使用都会 ...

  3. 使用python识别验证码

    公司的登录注册等操作有验证码,测试环境可以让开发屏蔽掉验证码,但是如果到线上的话就要想办法识别验证码或必过验证码了. 识别验证码主要分为三部分,一.对验证码进行二值化.二.将二值化后的图片分割.三.进 ...

  4. 89. Gray Code (Bit)

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  5. unity profiler - Loading.ReadObject

    关于Loading.ReadObject耗费比较高,有什么推荐的方法吗? Loading.ReadObject是Unity引擎的资源加载函数,一般出现在切换场景和加载API调用时,这其中包括纹理.网格 ...

  6. SVN概述

    ----------------------siwuxie095                                 SVN 概述         1.SVN 即 Subversion 的 ...

  7. python作业之修改用户配置文件

    用户的配置文件如下 backend oldboy school school1 age 21 weight 210 qq 550176565 iphone 139987676backend oldgi ...

  8. C#.net随机数函数

    (1)Random rnd = new Random(); int rndNum = rnd.Next();           //int 取值范围内的随机数 int rndNum = rnd.Ne ...

  9. .net为图片添加水印(转) jpg png和gif格式

    .net为图片添加水印(转) jpg png和gif格式 .net为图片添加水印(转) jpg png和gif格式,转自csdn的hyde82,现在跟大家一起来分享下: 利 用.net中System. ...

  10. 【转】VS2012 中文版转英文版 英文版转中文版 界面语言切换

    [1]下载VS2012的语言包,各种语言包都有,下载对应的即可. 微软官网衔接地址:vs2012 语言包  http://www.microsoft.com/zh-CN/download/detail ...