使用jQuery的ajax的方法完成一个手机归属地查询

1.设计页面的效果；
2. 选用HTTP GET方法，将电话提交到服务端，并将返回的结果显示在界面相应的位置；
3. 服务端API地址：http://www.meishihui68.com.cn/api/tel；
4. 数据提交方法：
需要在API地址后面以“？”方式附加，例如
http://www.meishihui68.com.cn/api/tel? tel=13021671512。

style样式代码：

<style>#mydiv {height: 230px;width: 300px;background-color: #e8f7f2;margin: auto;text-align: center;}          #div1 {background-color: #22be81;text-align: center;line-height: 50px;}         .tel {margin-top: 15px;border: 0.5px solid gainsboro;border-radius: 5px;height: 30px;width: 250px;text-align: center;}          .search {margin-top: 20px;border: 0.5px solid gainsboro;border-radius: 5px;height: 28px;width: 250px;text-align: center;background-color: #ff767a;color: white;}            #div2 {height: 50px;width: 275px;background-color: white;margin: 10px;text-align: left;font-size: 10px;padding: 7px 0px 0px 5px;}</style>

主体部分代码：

<body><div id="mydiv"><div id="div1">手机归属地查询</div><input type="text" placeholder="电话:请输入手机号码" class="tel" /><input type="submit" value="查询" class="search" /><div id="div2"><div>号码归属地：<span id="address"></span></div><br /><div>提供商：<span id="provider"></span></div></div></div><script src="js/jquery-2.1.0.js"></script><script>$('.search').click(function() {//为查询按钮实现事件监听var $tel = $(".tel").val();//定义一个JQuery对象,筛选出电话输入框，用于提取用户输入的电话号码$.ajax({method: "GET",//get方法datatype: "json",url: "http://www.meishihui68.com.cn/api/tel?",//API地址timeout: 2000,//设置超时事件为2sdata: {tel: $tel},success: function(res) {$('#address').html(res.result.mobilearea);//处理json对象res，从返回值中筛选出所需的值$('#provider').html(res.result.mobiletype);},error: function() {alert("错误");}});});</script></body>

代码效果：

使用jQuery的ajax的方法完成一个手机归属地查询相关推荐

JQuery中ajax,get方法在asmx中的使用
喜大普奔,今天终于完成了一个月前就想完成的一个代码实现.就是在点击一个按钮后禁用按钮,弹出正在操作的提示框,执行完事件后再启用按钮. 以前的想法是Ajax和aspx联用,这样,省页面,也不用对后台代码 ...
用 jQuery 的 AJAX 功能发现的一个错误/注意点：HTTP Error 411
今天程序中有个地方需要 Ajax 方式 POST 数据,发现在 IE 6.0 下正常,而 FireFox 2.0.0.9 下则出错. 通过 FireBug 抓取 ajax 回发后得到的页面信息如下: ...
案例：使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条
首先下载bootstrap和nprogress两个库 index.html <!DOCTYPE html> <html lang="en"> <hea ...
PHP封装一个手机号归属地查询接口，Ctrl CV就可以用，返回json数据
PHP归属地查询接口 <?php //200->正常;201手机号不正确;202手机号无数据 header("Access-Control-Allow-Origin:*" ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
浅谈ajax使用方法
众所周知,代码都是从上而下依次同步运行,同步的代码里面无法拿到异步的执行结果. Ajax概念 Ajax就是通过在后台与服务器进行少量数据交换,可以使网页实现异步更新的技术.这意味着可以在不重新加载整个 ...
php实现手机归属地的查询、,PHP实现查询手机归属地的方法详解
本文介绍的是PHP实现查询手机归属地的方法,首先来看看手机归属地查询的类图: 后台 MobileQuery类调用: \libs\HttpRquest \libs\ImRedis (未使用) Api类调 ...
php解析手机号归属地,一个非常好的php实现手机号归属地查询接口类
前一阵子看到了一个非常好的php手机归属地查询的类,写的很精简,查询也很精确!大致代码是这样的: header("Content-type:text/html;charset=utf-8& ...
封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...

使用jQuery的ajax的方法完成一个手机归属地查询

使用jQuery的ajax的方法完成一个手机归属地查询

style样式代码：

主体部分代码：

代码效果：

使用jQuery的ajax的方法完成一个手机归属地查询相关推荐

最新文章

热门文章