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. 2019-7-1-Roslyn-让编译时候-Message-内容默认输出

    title author date CreateTime categories Roslyn 让编译时候 Message 内容默认输出 lindexi 2019-07-01 14:16:59 +080 ...

  2. SDOI2018Round1 && 九省联考 爆炸记

    Day 0 做了一上午火车,大概中午十二点左右到了烟台核电培训中心宾馆,宾馆蛮不错的,跟我在北京参加英才论坛时住的宾馆舒适程度上差不多. 下午花式颓颓颓,吃了晚饭(体验一般)去试机,听说用Lemon评 ...

  3. Python全栈开发:Ajax全套

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  4. Android开发 EditText的开发记录

    设置显示内容与隐藏内容 if (isChecked){ editPassword.setTransformationMethod(HideReturnsTransformationMethod.get ...

  5. IPMI 远程配置

    #重启ipmi服务 #重启ipmi服务 #将 channel 1 设置为静态 IP #设置 IP #设置 channel 1 掩码 #设置 channel 1 网关 #查看用户名及 ID #设置ID号 ...

  6. CoreData手动创建托管对象子类时报错

    1.具体问题 手动创建CoreData,在进行创建托管对象子类时出现报错如图: 2.解决方法 当使用CoreData时,Xcode自动管理实体类,文件都放在Derived Data文件夹中: 所以不需 ...

  7. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  8. python数据类型初始1

    int: 1,2,3就是用于计算. bool:主要是用于判断,True,False str:用引号引起来的,'dsldgau','张三'.主要用于储存少量数据,进行操作 list(列表):[1,2,3 ...

  9. mybatis和java一些知识记录

    <where> <if test="userName != null and userName != ''"> and user_name like con ...

  10. Dmarc指定外域邮箱接收报告

    场景说明: 如果要将DMARC报告发送到记录所在的域以外,则接收域需要配置DNS记录,以便电子邮件服务提供商知道收件人指定报告授权. ================================= ...