JavaScript学习：利用第三方接口做手机归属地查询

逆战学习
整理一下关于怎么获取接口数据，然后渲染数据到页面上
第三方接口地址：手机归属地查询

一、思路和大致需要用到的知识点

1.body标签里准备一个input和button，用一个盒子包起来，一个无序列表先放着来存待会获取的数据

2.输入框提示输入11位手机号码 ,用正则表达式判断是否位正确的号码—用到onfocus onblur oninput 事件

3.点击button把input的值传给一个变量 --我把它设为phone – 作为接口地址变化的量

4.给button按钮添加点击事件 onclick，看变量phong 是否取到值–取到值就开始处理下一步

5.利用ajax的原理取到数据，处理数据

6.给页面添加css代码，使其美观。

二、基本知识的补充

接口：我此次使用的第三方接口已经内部做了处理，不会存在跨域问题

地址说明：http://api.k780.com/?app=phone.get&phone=13820654136&appkey=49215&sign=c0dd1e315db0662ac83695bfc61f759c&format=json
只需改动地址里面的phone = 后面的电话号码就可以得到不同的信息

ajax获取数据：请求有五个步骤
第一步，创建XMLHttpRequest对象

let ajax = new XMLHttpRequest();

第二步，注册回调函数（这一步可以放在最后一起，就不用起名，这个案例我是四步取）

ajax.onreadystatechange = cback；

第三步，配置请求信息，open()
get方式传输数据用 ? 拼接到地址后面即可
post方式则需要添加请求头

ajax.open("get", "/ashx/myz/Deta.ashx?methodName=GetAllComment", true);ajax.open("post", "/ashx/my/Deta.ashx?methodName=GetAllComment", true);

第四步，发送请求,post请求下，要传递的参数放这

ajax.send();

第五步，在回调函数中针对不同的响应状态进行处理

function cback() {// 判断异步对象的状态 只有异步才做这一步，同步可省略，但只有很少部分会同步if(ajax.readyState == 4) {// 判断交互是否成功if(ajax.status == 200) {// 获取服务器响应的数据var str = ajaxr.responseText；// 解析数据str = JSON.parse(str)；}}
}

跨域的问题可以私聊和期待我下面的博客

三、开始

html结构：

根据我上面的思路，写一个 input button 代码如下：
span 用来存放提示信息

     <h3>手机号码归属地查询</h3><div class="query"><p><input type="text" /><button>查询</button></p><span></span></div><ul></ul>

js逻辑部分

获取元素 --先声明 phone 赋值空

         let phone = "";let aBtn = document.querySelector('.query button');let qInput = document.querySelector(".query input");let aSpan =document .querySelector(".query span");let ulist = document .querySelector("ul");

写输入框input 的事件处理函数

1.获取焦点 onfocus 提示输入11位手机号码

2.失去焦点 onblur 用正则表达式判断输入号码是否满足条件，满足就把值赋给phone

3.span标签存放提示内容

         qInput.onfocus = function(){aSpan.innerHTML = "请输入11位手机号码";aSpan.style.color = "#ccc";};qInput.onblur = function(){let reg = /^1[34578]\d{9}$/;//首位为1，第二位为[]中一位。其余随意数字if(reg.test(qInput.value)){//满足则把输入框内容赋值给phoneaSpan.innerHTML = "";phone = qInput.value;}else{//否则为空phone = "";}aSpan.innerHTML = "";//失去焦点清空};

写button的点击事件

1.点击buttton 判断phone是否为空值，是就提示手机号有误或为空

2.phone不为空就开始使用ajax获取数据，这里我使用的是get方式

3.用phone替换地址中的电话号码，用拼接 + 实现

         aBtn.onclick = function (){if(phone !== ""){let url = "http://api.k780.com/?app=phone.get&phone="+ phone +"&appkey=49215&sign=c0dd1e315db0662ac83695bfc61f759c&format=json"let ajax = new XMLHttpRequest();//1ajax.open("get",url,true);//2ajax.send();//3ajax.onreadystatechange = function () {//4这里把注册函数和结构写在一起了}}else{//phone为空aSpan.innerHTML = "手机号格式错误或未输入";aSpan.style.color = "firebrick";}}

处理数据----填充上面的 ajax.onreadystatechange 函数

1.判断就绪状态码，判断交互是否成功 ajax.readyState == 4

2.判断服务器响应数据 ajax .status ==200

3.ajax.responseText 为获取到的数据用**JSON.parse(ajax.responseText)**转化为对象---------先用控制台查看结构

4.分离想要的数据渲染出来

ajax.onreadystatechange = function () {//4 一旦上面的就绪状态码发生改变，事件里面触发。if (ajax.readyState == 4) {if(ajax.status ===200){//console.log(ajax.responseText);//获取接口返回的数据，类型是字符串//console.log(JSON.parse(ajax.responseText));//转化为对象let strPhone = JSON.parse(ajax.responseText);//接收这个对象let pro = strPhone.result.att.split(',')[1];let city = strPhone.result.att.split(',')[2];//console.log(pro);let listr = `<li>查询结果</li><li><span>所属省份：</span>${pro}</li><li><span>所属城市：</span>${city}</li><li><span>城市区号：</span>${strPhone.result.area}</li><li><span>城市邮编：</span>${strPhone.result.postno}</li><li><span>运&nbsp;&nbsp;营&nbsp;&nbsp;商：</span>${strPhone.result.operators}</li>`// console.log(strPhone.result);// console.log(strPhone.result.att);//中国,四川,宜宾// console.log(strPhone.result.operators);//中国移动 运营商// console.log(strPhone.result.area);//城市区号// console.log(strPhone.result.postno);//城市邮编ulist.innerHTML = listr;ulist.style.cssText="border-top: 1px solid blue;";}}};

优化一下input 当里面的值改变时下面的无序列表应该把内容清空

         qInput.oninput = function (){//当输入框值改变，清空ul的内容ulist.innerHTML ="";ulist.style.cssText="border-top: ;";}

最后添加css代码，使整体页面美观。
这个就看各人的喜好了，我的代码如下：

         *{margin: 0;padding: 0;}h3{width: 300px;margin: 20px auto 0;text-align: center;height: 30px;border-bottom:1px solid #ccc ;}.query{width:300px;height: 50px;margin: 50px auto;position: relative;}.query p{width: 300px;height: 30px;display: flex;border: 1px solid #ccc;}.query input {flex: 1;text-indent: 20px;outline: none;border: none;}.query button{width: 100px;font-size: 18px;line-height: 20px;height: 31px;margin-top: -1px;}.query span{font-size: 12px;position: absolute;top: 34px;left: 22px;}ul{width: 300px;margin: 0 auto;background-color: #CCC;}ul li{list-style: none;width: 298px;height: 30px;border: 1px solid blue;margin: 0 auto;line-height: 30px;border-top:none ;}ul li span{display: inline-block;width: 100px;text-align: left;margin-right:50px ;margin-left: 50px;border-right:1px solid royalblue ;}ul li:nth-child(1){text-align: center;}

四、结束

把我上面的代码整合起来就是一个相对完整的手机归属地查询案例
下面是我的效果图：

总结：

1.熟练ajax的步骤

2.学会处理获取的数据，利用字符串数组的方法拿到自己想要的数据

3.多尝试几种方法，每个人的逻辑不一样