JacksonBruce/smartParsePro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e2ac8b26ff3de2841294e756c4560aa71385cd17
smartParsePro/index.html

285 lines
8.7 KiB
HTML
Raw Normal View History

添加第一版代码
2019-09-12 13:44:29 +08:00
<!DOCTYPE html>
<html lang="en">
添加接口调用
2020-05-13 00:09:40 +08:00
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
添加四级联动
2019-09-12 14:50:11 +08:00
<title>地址智能识别</title>
添加接口调用
2020-05-13 00:09:40 +08:00
<link rel="icon" type="image/x-icon" href="img/smart.png" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
Update index.html
2020-11-16 11:02:27 +08:00
格式化代码
2019-09-12 17:44:47 +08:00
<script async defer src="https://buttons.github.io/buttons.js"></script>
更改demo位置
2020-05-13 10:15:24 +08:00
<script src="js/axios.js"></script>
添加四级联动
2019-09-12 14:50:11 +08:00
添加接口调用
2020-05-13 00:09:40 +08:00
<style>
#value .key {
color: #ff5722;
display: inline-block;
width: 111px;
text-align: right;
}
#value .value {
color: #366500;
padding-left: 10px;
}
更新demo
2020-05-14 09:37:37 +08:00
li {
padding: 5px;
}
li:hover {
cursor: pointer;
background: #8bc34aa1;
padding: 5px;
}
添加第一版代码
2019-09-12 13:44:29 +08:00
</style>
添加接口调用
2020-05-13 00:09:40 +08:00
</head>
添加四级联动
2019-09-12 14:50:11 +08:00
添加接口调用
2020-05-13 00:09:40 +08:00
<body>
添加四级联动
2019-09-12 14:50:11 +08:00
<div class="page-header">
添加接口调用
2020-05-13 00:09:40 +08:00
<h1>
地址智能识别
Update index.html
2020-11-16 11:02:27 +08:00
<small>支持省市区街道/姓名/电话/邮编</small>
添加接口调用
2020-05-13 00:09:40 +08:00
<a
class="github-button"
href="https://github.com/wzc570738205/smartParsePro"
data-size="large"
data-show-count="true"
aria-label="Star wzc570738205/smartParsePro on GitHub"
>Star</a
>
</h1>
添加四级联动
2019-09-12 14:50:11 +08:00
</div>
Update index.html
2020-11-16 11:02:27 +08:00
<!-- <div class="alert alert-danger" role="alert">地址、姓名、电话、邮编、身份证号码（字母大写）用空格或者特殊字符分开!!（支持以下数据格式</div>
添加接口调用
2020-05-13 00:09:40 +08:00
<div>
更新demo
2020-05-14 09:37:37 +08:00
特殊字符<code>~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“’。，、？-</code>
添加接口调用
2020-05-13 00:09:40 +08:00
</div>
<br />
Update index.html
2020-11-16 11:02:27 +08:00
<ol>
添加接口调用
2020-05-13 00:09:40 +08:00
<li>广东省珠海市香洲区盘山路28号幸福茶庄,陈景勇，13593464918</li>
<li>马云，陕西省西安市雁塔区丈八沟街道高新四路高新大都荟 13593464918</li>
Update index.html
2020-11-16 11:02:27 +08:00
<li>陕西省西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918</li>
<li>西安市雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918</li>
<li>雁塔区丈八沟街道高新四路高新大都荟710061 刘国良 13593464918</li>
添加接口调用
2020-05-13 00:09:40 +08:00
<li>北京市朝阳区姚家园3楼 13593464918 马云</li>
更新demo
2020-05-14 09:37:37 +08:00
<li>河北省石家庄市新华区中华北大街68号鹿城商务中心6号楼1413室 150-3569-6956 马云</li>
添加座机识别
2020-06-05 13:49:32 +08:00
<li>疆维吾尔自治区乌鲁木齐市沙依巴克区西虹东路463号 400-1808855 小红</li>
<li>新疆阿克苏温宿县博孜墩柯尔克孜族乡吾斯塘博村一组306号 800-8585222 马云</li>
添加四级联动
2019-09-12 14:50:11 +08:00
</ol>
Update index.html
2020-11-16 11:02:27 +08:00
-->
添加接口调用
2020-05-13 00:09:40 +08:00
<textarea
class="form-control"
Update index.html
2020-11-16 11:02:27 +08:00
onkeyup="getAddress()"
添加接口调用
2020-05-13 00:09:40 +08:00
cols="50"
gxdemo
2020-05-14 09:39:18 +08:00
rows="5"
添加接口调用
2020-05-13 00:09:40 +08:00
id="textarea"
Update index.html
2020-11-16 11:05:25 +08:00
placeholder="请粘贴或者输入你的地址"
添加接口调用
2020-05-13 00:09:40 +08:00
></textarea>
<h4>省市区街道四级联动</h4>
格式化代码
2019-09-12 17:44:47 +08:00
<form class="form-inline">
添加接口调用
2020-05-13 00:09:40 +08:00
<div class="form-group">
<label for="exampleInputName2">省/直辖市</label>
<select class="form-control" id="province">
<option>请选择</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail2">市</label>
<select class="form-control" id="city">
<option>请选择</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail2">区/县</label>
<select class="form-control" id="county">
<option>请选择</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail2">镇/乡/街道</label>
<select class="form-control" id="street">
<option>请选择</option>
</select>
</div>
格式化代码
2019-09-12 17:44:47 +08:00
</form>
更新demo
2020-05-19 10:36:52 +08:00
<div id="response"></div>
添加第一版代码
2019-09-12 13:44:29 +08:00
<div id="value"></div>
添加接口调用
2020-05-13 00:09:40 +08:00
</body>
添加第一版代码
2019-09-12 13:44:29 +08:00
</html>
<script>
Update index.html
2020-11-16 11:02:27 +08:00
$('li').on('click', function (e) {
$('#textarea').val($(this).html().trim())
更新demo
2020-05-14 09:37:37 +08:00
getAddress()
})
添加接口调用
2020-05-13 00:09:40 +08:00
function getAddress() {
Update index.html
2020-11-16 11:02:27 +08:00
let parse_list = smart($('#textarea').val())
let html = ''
/* for (let key in parse_list) {
添加接口调用
2020-05-13 00:09:40 +08:00
if (parse_list[key]) {
html +=
`<p><span class="key">` +
key +
`</span>:<span class="value">` +
parse_list[key] +
`</span></p>`;
}
添加四级联动
2019-09-12 14:50:11 +08:00
}
Update index.html
2020-11-16 11:02:27 +08:00
$("#value").html(html); */
添加接口调用
2020-05-13 00:09:40 +08:00
2
2020-06-05 14:06:15 +08:00
axios({
Update index.html
2020-11-16 10:57:22 +08:00
method: 'post',
Update index.html
2020-11-16 11:07:43 +08:00
url: "https://wangzc.wang/smAddress",
2
2020-06-05 14:06:15 +08:00
data: {
Update index.html
2020-11-16 11:02:27 +08:00
address: $('#textarea').val(),
2
2020-06-05 14:06:15 +08:00
},
Update index.html
2020-11-16 11:02:27 +08:00
})
.then(function (res) {
$('#response').html(
`<span style="color:green">接口调用状态码：200；当前调用次数：` +
res.data.requestNumber +
`</span>`
)
html += `<p><span class="key">姓名</span>:<span class="value">${res.data.name}</span></p>`
html += `<p><span class="key">电话</span>:<span class="value">${res.data.phone}</span></p>`
html += `<p><span class="key">邮编</span>:<span class="value">${res.data.zipCode}</span></p>`
html += `<p><span class="key">身份证号码</span>:<span class="value">${res.data.idCard}</span></p>`
html += `<p><span class="key">省</span>:<span class="value">${res.data.province}</span></p>`
html += `<p><span class="key">市</span>:<span class="value">${res.data.city}</span></p>`
html += `<p><span class="key">区</span>:<span class="value">${res.data.county}</span></p>`
html += `<p><span class="key">街道</span>:<span class="value">${res.data.street}</span></p>`
html += `<p><span class="key">详细地址</span>:<span class="value">${res.data.address}</span></p>`
$('#value').html(html)
})
.catch(function (err) {
$('#response').html(
`<span style="color:red">接口调用状态码：500</span>`
)
})
添加接口调用
2020-05-13 00:09:40 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
$('#province').val(parse_list.provinceCode)
$('#city').val(parse_list.cityCode)
$('#county').val(parse_list.countyCode)
$('#street').val(parse_list.streetCode)
添加接口调用
2020-05-13 00:09:40 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
getCity($('#province').val(), parse_list)
getCounty($('#city').val(), parse_list)
getStreet($('#county').val(), parse_list)
添加接口调用
2020-05-13 00:09:40 +08:00
}
Update index.html
2020-11-16 11:02:27 +08:00
addressList = pcassCode
///
添加接口调用
2020-05-13 00:09:40 +08:00
addressList.forEach((item) => {
Update index.html
2020-11-16 11:02:27 +08:00
formatAddresList(item, 1, '')
})
//
let province = ''
添加接口调用
2020-05-13 00:09:40 +08:00
addressList.forEach((res) => {
Update index.html
2020-11-16 11:02:27 +08:00
province += ` <option value='` + res.code + `'>` + res.name + `</option>`
})
$('#province').html(province)
getCity($('#province').val())
getCounty($('#city').val())
getStreet($('#county').val())
添加接口调用
2020-05-13 00:09:40 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
$('#province').change((res) => {
let provinceCode = $('#province').val()
getCity(provinceCode)
getCounty($('#city').val())
getStreet($('#county').val())
})
添加接口调用
2020-05-13 00:09:40 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
$('#city').change((res) => {
let cityCode = $('#city').val()
getCounty(cityCode)
getStreet($('#county').val())
})
添加接口调用
2020-05-13 00:09:40 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
$('#county').change((res) => {
let countyCode = $('#county').val()
getStreet(countyCode)
})
添加接口调用
2020-05-13 00:09:40 +08:00
function getCity(provinceCode, parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
let cityList = []
let city = ''
添加接口调用
2020-05-13 00:09:40 +08:00
addressList.forEach((res) => {
if (res.code == provinceCode) {
Update index.html
2020-11-16 11:02:27 +08:00
cityList = res.children
return
添加接口调用
2020-05-13 00:09:40 +08:00
}
Update index.html
2020-11-16 11:02:27 +08:00
})
添加接口调用
2020-05-13 00:09:40 +08:00
cityList.forEach((res) => {
Update index.html
2020-11-16 11:02:27 +08:00
city += ` <option value='` + res.code + `'>` + res.name + `</option>`
})
$('#city').html(city)
添加接口调用
2020-05-13 00:09:40 +08:00
if (parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
$('#city').val(parse_list.cityCode)
添加四级联动
2019-09-12 14:50:11 +08:00
}
添加接口调用
2020-05-13 00:09:40 +08:00
}
function getCounty(cityCode, parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
let countyList = []
let county = ''
添加接口调用
2020-05-13 00:09:40 +08:00
addressList.forEach((el) => {
el.children.forEach((res) => {
if (res.code == cityCode) {
Update index.html
2020-11-16 11:02:27 +08:00
countyList = res.children
return
添加四级联动
2019-09-12 14:50:11 +08:00
}
Update index.html
2020-11-16 11:02:27 +08:00
})
})
添加接口调用
2020-05-13 00:09:40 +08:00
countyList.forEach((res) => {
Update index.html
2020-11-16 11:02:27 +08:00
county += ` <option value='` + res.code + `'>` + res.name + `</option>`
})
$('#county').html(county)
添加接口调用
2020-05-13 00:09:40 +08:00
if (parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
$('#county').val(parse_list.countyCode)
添加四级联动
2019-09-12 14:50:11 +08:00
}
添加接口调用
2020-05-13 00:09:40 +08:00
}
function getStreet(countyCode, parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
let streetList = []
let street = ''
添加接口调用
2020-05-13 00:09:40 +08:00
addressList.forEach((el) => {
el.children.forEach((element) => {
element.children.forEach((res) => {
if (res.code == countyCode) {
Update index.html
2020-11-16 11:02:27 +08:00
streetList = res.children
return
添加接口调用
2020-05-13 00:09:40 +08:00
}
Update index.html
2020-11-16 11:02:27 +08:00
})
})
})
添加接口调用
2020-05-13 00:09:40 +08:00
streetList.forEach((res) => {
Update index.html
2020-11-16 11:02:27 +08:00
street += ` <option value='` + res.code + `'>` + res.name + `</option>`
})
$('#street').html(street)
添加接口调用
2020-05-13 00:09:40 +08:00
if (parse_list) {
Update index.html
2020-11-16 11:02:27 +08:00
$('#street').val(parse_list.streetCode)
添加第一版代码
2019-09-12 13:44:29 +08:00
}
添加接口调用
2020-05-13 00:09:40 +08:00
}
</script>
1
2020-08-11 11:41:02 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-119026906-1"
></script>
1
2020-08-11 11:41:02 +08:00
<script>
Update index.html
2020-11-16 11:02:27 +08:00
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
1
2020-08-11 11:41:02 +08:00
Update index.html
2020-11-16 11:02:27 +08:00
gtag('config', 'UA-119026906-1')
1
2020-08-11 11:41:02 +08:00
</script>
Update index.html
2020-11-16 11:32:49 +08:00
<script src="js/jquery.min.js"></script>
<script src="js/pcasCode.js"></script>
<script src="js/zipCode.js"></script>
<script src="js/address_parse.js"></script>
<!-- <script src="dist/address_parse.js"></script> -->
<script src="js/bootstrap.min.js"></script>
Reference in New Issue Copy Permalink