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

ajax请求数据以及处理的更多相关文章

  1. 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

    在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只 ...

  2. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  3. Ajax请求数据的两种方式

    ajax 请求数据的两种方法,有需要的朋友可以参考下. 实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写 ...

  4. h5-localStorage实现缓存ajax请求数据

    使用背景:要实现每次鼠标hover“能力雷达”,则显示能力雷达图(通过ajax请求数据实现雷达图数据显示),所以每次hover都去请求ajax会影响性能,因此这里要用到本地缓存. 实现: 此处是通过传 ...

  5. session失效,使用ajax请求数据被拦截,此时正常的处理逻辑是跳到登录界面,而不是界面没有变化(java推断是否是ajax请求)

    在登录过滤器中.推断请求是ajax请求还是超链接或者地址栏变化的请求 if (httpServletReq.getHeader("x-requested-with") != nul ...

  6. 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  7. 关于ajax请求数据后,数据本身的js失效的一些想法

    今天遇到一个头疼的问题.我做一个左右翻页效果(客户要求能够无限翻页),所以只能动态请求数据,进行局部刷新操作. 这时候问题就出来了,当我请求翻页的时候,数据通过js填充到div里面,但这些数据,自身带 ...

  8. js在方法Ajax请求数据来推断,验证无效(OnClientClick=&quot;return Method();&quot;),或者直接运行的代码隐藏

    function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/get ...

  9. ajax 请求数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 多次ajax请求数据json出错!!

    问题描述: 1.对象数据存放在session中,每次从session中取数据 2.jsp初始化完毕调用ajax请求,返回的数据格式出错(返回部分数据,即丢失了部分数据) 解决方案:

随机推荐

  1. 2018-8-10-win10-uwp-验证输入-自定义用户控件

    title author date CreateTime categories win10 uwp 验证输入 自定义用户控件 lindexi 2018-08-10 19:16:51 +0800 201 ...

  2. Ping- Ip- Linux必学的60个命令

    1.作用 ping检测主机网络接口状态,使用权限是所有用户. 2.格式 ping [-dfnqrRv][-c][-i][-I][-l][-p][-s][-t] IP地址 3.主要参数 -d:使用Soc ...

  3. ThinkPHP无限分类模块设计

    public function catelist(){ $cate=D('Cate'); //var_dump($cate->gettree());exit; $cateres=$cate-&g ...

  4. loj2509 hnoi2018排列

    题意:对于a数组,求它的一个合法排列的最大权值.合法排列:对于任意j,k,如果a[p[j]]=p[k],那么k<j. 权值:sigma(a[p[i]]*i).n<=50W. 标程: #in ...

  5. MongDB4.0-入门学习之运算符

    MongDB 4.0 入门学习之运算符 基本语法:db.collection.find({<key>:{$symbol:<value>}}) 条件查询匹配运算符 符号 描述 范 ...

  6. 2016.10.4初中部下午NOIP普及组比赛总结

    2016.10.4初中部下午NOIP普及组比赛总结 这次的题有些水,只是第四题有点坑. 题目: 比赛:AC+0+AC+50=250 改题:AC+AC+AC+50=350 一.Bill 满地都是水 题目 ...

  7. 【JZOJ3318】Brunhilda的生日

    description 除去对铁质盔甲强烈的热爱,Brunhilda是一个正常的7岁女孩.近期,她正在策划一个完美的生日派对.她发明了如下的一个游戏:所有的孩子在一个数k被宣读之前不停地跑来跑去.当这 ...

  8. ActiveMQ 基础

    Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件:由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行.它能很好地 ...

  9. 如何在window和mac下查找数据库

    1. mac 下终端使用步骤 cd /Applications/xampp/bin ./mysql -u root 2. window CMD命令中执行步骤 D: cd  D:/xampp/mysql ...

  10. PAT甲级——A1099 Build A Binary Search Tree

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...