ajax请求数据以及处理

html

<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"></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');
});

 

转载于:https://www.cnblogs.com/myclovers/p/5317755.html