<!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. Rsync+sersync实现数据实时同步

    前言: 一.为什么要用Rsync+sersync架构? 1.sersync是基于Inotify开发的,类似于Inotify-tools的工具 2.sersync可以记录下被监听目录中发生变化的(包括增 ...

  2. Can not find the tag library descriptor for "http://www.springframework.org/tags"

    1.Download the Spring dependency jar2.Place it to the lib folder path is /WEB-INF/lib/spring.jar 3.T ...

  3. How to Pronounce INTERNATIONAL

    How to Pronounce INTERNATIONAL Share Tweet Share Tagged With: Dropped T How do you pronounce this lo ...

  4. 迷你MVVM框架 avalonjs 学习教程12、数据联动

    在许多表单应用,我们经常遇到点击一个复选框(或下拉框)会引发旁边的复选框(或下拉框)发生改变,这种联动效果用avalon来做是非常简单的.在avalon里,存在各种绑定回调与$watch回调,完全满足 ...

  5. XtraBackup 备份原理

    来着淘宝技术: http://mysql.taobao.org/monthly/2016/03/07/ https://github.com/alibaba/AliSQL 前言 Percona Xtr ...

  6. Java对称与非对称加密解密,AES与RSA

    加密技术可以分为对称与非对称两种. 对称加密,解密,即加密与解密用的是同一把秘钥,常用的对称加密技术有DES,AES等 而非对称技术,加密与解密用的是不同的秘钥,常用的非对称加密技术有RSA等 为什么 ...

  7. float数据类型研究，发现其能显示的有效数字极为有限

    1. 范围  float和double的范围是由指数的位数来决定的.  float的指数位有8位,而double的指数位有11位,分布如下:  float:  1bit(符号位) 8bits(指数位) ...

  8. [SCOI2007]修车（建图好题）

    [SCOI2007]修车 https://www.lydsy.com/JudgeOnline/problem.php?id=1070 Time Limit: 1 Sec  Memory Limit:  ...

  9. Spring声明式事务管理（基于注解方式实现）

    ----------------------siwuxie095                                 Spring 声明式事务管理(基于注解方式实现)         以转 ...

  10. [leetcode]689. Maximum Sum of 3 Non-Overlapping Subarrays三个非重叠子数组的最大和

    In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...