您的位置:首页 > 其它

$.ajax请求数据以及处理

2016-03-24 23:21 323 查看
////////////////////////////////////////////////////////////////////////////////////////////////////

<div class="list-block media-list mp0 mbb" data-infos='infos' style="display: none;">
<div class="searchs">
<input type="search" id="search-phone" placeholder="请输入您要查询的手机号码"/>
<a href="#" id="inqures" class="inqures">查询</a>
</div>
<ul id="order-json">
<!--<li data-active="hover" class="itme-infos">-->
<!--<a href="#" class="item-link item-content">-->
<!--<div class="item-media"><img src="../statics/images/bg-order-1.png" style='width: 2.2rem;'>-->
<!--</div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title-row">-->
<!--<div class="item-title">猪多多巧克力礼盒专业代发 <b class="bi-loac gti"></b><b-->
<!--class="bi-loac renzheng"></b><b class="bi-loac xin"></b></div>-->
<!--</div>-->
<!--<div class="item-subtitle bi-par"><span class="bi-phone"></span>15922321234</div>-->
<!--<div class="item-subtitle bi-par"><span class="bi-loaction"></span>重庆-重庆市-南岸区-南岸区南城大道119号-->
<!--</div>-->
<!--</div>-->
<!--</a>-->
<!--<b class="i-link-loacs i-link-icon"></b>-->
<!--</li>-->
</ul>
</div>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//json处理函数
function myjson() {
$.post('../statics/js/data.json', {"phones": $("#search-phone").val()}, function (data) {
for (var i = 0; len = data.length, i < len; i++) {
if (data[i].phones == $("#search-phone").val()) {
$("#order-json").append(
"<li data-active='hover' class='itme-infos'><a href='#' class='item-link item-content'><div class='item-media'><img src=" + data[i].img + " style='width: 2.2rem;'></div><div class='item-inner'><div class='item-title-row'> <div class='item-title'>" + data[i].name + "<b class='bi-loac gti'></b><b class='bi-loac renzheng'></b><b class='bi-loac xin'></b></div> </div><div class='item-subtitle bi-par'><span class='bi-phone'></span>" + data[i].phones + "</div><div class='item-subtitle bi-par'><span class='bi-loaction'></span>" + data[i].ips + "</div></div></a><b class='i-link-loacs'></b></li>"
);
}
}
}, 'json');
}

//json数据调用
$('#inqures').click(function () {
$("#order-json").html("");
myjson();
});

//电话号码的查询显示结果
$("#order-json").delegate('li', 'click', function () {
$(this).toggleClass('i-link-active').children('.i-link-loacs').toggleClass('i-link-icon');
});

///////////////
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: