HTML5第9节课堂笔记（初探mui，制作手机归属地查询）

手机MUI程序，利用它的ajax方法访问baidu的API
http://apistore.baidu.com/apiworks/servicedetail/794.html
http://dev.dcloud.net.cn/mui/ajax/
自己做的手机归属地查询
<!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"/>
    <link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<header class="mui-bar mui-bar-nav" >
            <h1 class="mui-title" >号码归属地查询</h1>
    </header>   
   <div class="mui-content"  >
     <div class="mui-content-padded">
     <p style="text-align:center;margin-bottom: 30px;">            
        </p>
     <div class="mui-input-group">  
       <div class="mui-input-row mui-search" ;>
          <input type="search" id="number" class="mui-input-clear" placeholder="请输入查询手机号码" >  
        </div>
         <div class="mui-button-row">
           <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">查  询</button> 
         </div>
       </div>
        <h5 class="mui-content-padded" >号码归属地信息：</h5>
                               
                  <code id="prefix"></code><br />
                                  
                  <code id="province"></code>
                   <code id="city"></code><br />
                                   
                   <code id="type"></code>              
    </div>
   <script type="text/javascript" charset="utf-8">

    var number=document.getElementById('number');
    var status=document.getElementById('status');
    var type=document.getElementById('type');
    var province=document.getElementById('province');
    var city=document.getElementById('city');
    var prefix=document.getElementById('prefix');
    var network;
    mui(".mui-input-group").on('tap',"#number",function(){
    //重置结果内容为空
            prefix.innerHTML="";
 province.innerHTML="";
  type.innerHTML="";
 city.innerHTML="";
    });

   mui('.mui-input-group').on('tap',".mui-btn",function(){
          //判断网络是否连接
          mui.plusReady(function () {
          network =true ;   
         if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
              network = false;
                }
               });


   if(number.value=="")
   {
   mui.alert("输入的手机号码不能为空！");
   return false;
   }
   // "[1]"代表第1位为数字1，"[3578]"代表第二位可以为3、5、7、8中的一个，
   //  "\\d{9}"代表后面是可以是0～9的数字，有9位。 )
   else if(!(/^1[3|4|5|7|8]\d{9}$/.test(number.value))){
   mui.alert("输入的手机号码格式有误！");
            return false;
   }
   else{
     if(network){
                 mui.toast('网络正常,正在发送请求...');

   mui.ajax('http://apis.baidu.com/apistore/mobilenumber/mobilenumber',{
   headers:{ 
//"Access-Control-Allow-Headers":"X-Requested-With",
"apikey":"d6a8d29e244134149b4583f670676fab"
},
data:{
phone:number.value
},
dataType:'json',
type:'get',
success:function(data){
prefix.innerHTML="号码段："+data.retData.prefix;
 province.innerHTML="归属地："+data.retData.province;
  type.innerHTML="卡类型："+data.retData.supplier;
 city.innerHTML=data.retData.city;
},
error:function(xhr,type,errorThrown){
 mui.toast('数据请求失败！');
},
             });
                    }else
                    {
                        mui.toast("当前网络不给力，请检查网络,重启应用或稍后再试...");

                    }
                  }  
                    });
  //返回键处理  
//处理逻辑：1秒内，连续两次按返回键，则退出应用；  
var first = null;  
mui.back = function() {  
    //首次按键，提示‘再按一次退出应用’  
    if (!first) {  
        first = new Date().getTime();  
        mui.toast('再按一次退出应用');  
        setTimeout(function() {  
            first = null;  
        }, 1000);  
    } else {  
        if (new Date().getTime() - first < 1000) {  
            plus.runtime.quit();  
        }  
    }  
};  
   </script>  
</body>
</html>
秒客网

HTML5第9节课堂笔记（初探mui，制作手机归属地查询）

相关文章
