您的位置：首页 > 其它

利用百度apistore的身份证查询API制作的身份证信息查询工具

2016-01-29 11:51 645 查看

利用百度apistore的身份证查询API制作的身份证信息查询：

实现效果：

html：

<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<table>
<tr>
<td>
<input id="idIn" type="text">
</td>
<td>
<input id="idBtn" type="button" value="查询">
</td>
</tr>
</table>
</div>
<table id="result" style="display: none">
<tr>
<td>性别</td>
<td id="gend"></td>
</tr>
<tr>
<td>出生日期</td>
<td id="birth"></td>
</tr>
<tr>
<td>归属地</td>
<td id="addr"></td>
</tr>
</table>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

css：

/*CSS源代码*/
body{
background:#CFCFCF;
}
form {
border: 1px solid #467;
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
padding: 10px;
width: 300px;
color: #456;
margin: 15px;
}

div {
margin: 15px;
color: #346;
}

button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
line-height: 1.4;
text-align: center;
cursor: pointer;
border-radius: 4px;
border: 1px solid transparent;
color: #fff;
background: #1aba9c;
}

input {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

js：

/*Javascript代码片段*/
$(document).ready(function () {
//headers中提供了apikey供服务器识别并返回数据。如果请求返回的data中提示试用次数用尽，请更换此处的apikey为你自己账号的apikey后再试
var headers = {"apikey": "5292d6abaf0ec95c2b7924551e50668f"};

$("#idBtn").click(function () {
{
$("#result").attr("style","display:none");
var id = $("#idIn").val();
if (id == "") {
$(".res").remove();
$("#container").append("<p class='res'>" + "请输入要查询的身份证号再点击按钮!");
}
else {
//url变量指定了http访问的地址
var url = "http://apis.baidu.com/apistore/idservice/id";
url = url + "?id=" + id;
console.dir(url);
$.ajax(url, {
method: "GET",
headers: headers,
dataType: "json",
success: function (data) {
console.dir(data);
if (data.errNum == "-1") {
$(".res").remove();
$("#container").append("<p class='res'>" + "身份证号码不合法!");
}
else {
$(".res").remove();
if (data.retData.sex == 'M')
$("#gend").text("男");
else if (data.retData.sex == 'F') {
$("#gend").text("女");
}
else {
$("#gend").text("未知");
}
$("#birth").text(data.retData.birthday);
$("#addr").text(data.retData.address);
$("#result").attr("style","display:block");
}
}
});
}

}
});
});

在线调试工具：复制上面代码到该在线工具查看效果

原文作者：atuno

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航