MUI制作手机号码归属地查询

使用MUI和百度API查询手机号码归属地

最新推荐文章于 2019-04-23 16:28:35 发布

原创最新推荐文章于 2019-04-23 16:28:35 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #百度 #json #api

本文介绍了如何结合MUI框架与百度API实现手机号码的归属地查询功能，包括联网检测、双击退出应用的逻辑、正则表达式应用以及使用mui的ajax方法解析json数据。

调用百度API手机归属地查询

1：实现了联网检测

2：按两次退出应用

3：正则表达式

4：mui ajax()方法，json数据取出

<!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>4-23</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/css1.css" />
    <script type="text/javascript" charset="utf-8"> 	
    </script>
</head>
<body>
	<center>
	<h1 >号码归属地查询</h1>
	<h3>请输入号码：</h3>
	<h5>（请保持手机联网）</h5>
	<form action="http://apis.baidu.com/apistore/mobilenumber/mobilenumber" id="form1" method="get">
		<div class="mui-input-row">
		    <input type="text" placeholder="请输入电话号码" id="tel" class="mui-input-clear"/>
		</div>
<button type="button" class="mui-btn mui-btn-blue" id="btn">查询</button>

<div id="html"></div>
	</form>	
</center>
	<script>
	var reg=/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;		
			(function($, doc) {
		$.init();
	$.plusReady(function(){
			$('#form1').on('tap','#btn',function(){
				var network=plus.networkinfo.getCurrentType();
			  tel=doc.getElementById('tel').value;
				if(network==plus.networkinfo.CONNECTION_NONE)
				{$.toast('请联网');
				return false;}
				else
				{	
					if(tel!="")
			{
			var rst=tel.match(reg);	
		if(rst==null)
			{
			$.toast('请输入正确格式');
			return false;
		}
		else 
			{
			ajax();
			}}
			else
			$.toast("号码不能为空");
			return false;
				}
			});
var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
					//
					var apiUrl="http://apis.baidu.com/apistore/mobilenumber/mobilenumber";	
			function ajax(){
						mui.ajax(apiUrl+"?phone="+tel,{
			type:"GET",
			headers:{
				"apikey":"3aaf86defc41e55e1ab473e3c490bdb6"
			},
			dataType:"json",//accept???
			//contentType:"application/json",
			success:function(res)
			{
	var province=res.retData.province;
 var city=res.retData.city;
 var phone=res.retData.phone;
	var textHtml="<div><h3>电话："+phone+"</h3><h3>省份："+province+"</h3><h3>城市："+city+"</h3></div>";
	document.getElementById('html').innerHTML=textHtml;
			}	
		})}			
	});
	}(mui, document));	
	</script>
</body>
</html>