<!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. 趣味编程：CPS风格代码（C++11, C++14版）

    CPS风格代码(C++11版) #include <iostream> using namespace std; int add(int x, int y){return x + y;} ...

  2. static静态局部变量初始化问题

    第一次写博客之类的东西,主要是为了记录自己的学习过程,以便于记忆的加深和与各位大神进行探讨,学习更多的东西. 本次上传主要是关于静态局部变量的初始化问题. 首先,静态局部变量和全局变量一样,数据都存放 ...

  3. PCA原理（转）

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  4. innerText 与textContent区别

    两者都是可以过滤html元素 innerText 获取内容 换行会有L类似特殊符号 textContent 没有

  5. google thumbnailator

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好. 从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片 ...

  6. OC 线程操作 - GCD队列组

    1.队列组两种使用方法2.队列组等待 wait /** 新方法 队列组一般用在在异步操作,在主线程写队列组毫无任何作用 */ - (void)GCD_Group_new_group___notify{ ...

  7. 7-qt随机数qrand

    QT生成随机数和C语言差距不大,C语言用srand()和rand(),QT是用Qsrand()和qrand(): QT生成随机数的格式是: qsrand(QTime(0,0,0).secsTo(QTi ...

  8. dede数据库内容替换，去掉文章内容中的img标签

    1.织梦已经给我们准备好了数据库内容替换工具,在采集->批量维护->数据库内容替换 2.织梦的文章内容一般在放在dede_addonarticle表body字段中. (1).选择好数据表和 ...

  9. 基于udp的套接字

    1 ss = socket() #创建一个服务器的套接字 2 ss.bind() #绑定服务器套接字 3 inf_loop: #服务器无限循环 4 cs = ss.recvfrom()/ss.send ...

  10. Jmeter获取不到cookie（备注：前面和后面的几个步骤都可以获取到cookie）

    今天的一个Jmeter脚本,有一个HTTP request始终获取不到cookie,但其前面和后面的几个步骤都可以获取到cookie,报文的请求服务器地址都是照着fiddler上面填的,没有问题,后来 ...