html

  1. <div class="list-block media-list mp0 mbb" data-infos='infos' style="display: none;">
  2. <div class="searchs">
  3. <input type="search" id="search-phone" placeholder="请输入您要查询的手机号码"/>
  4. <a href="#" id="inqures" class="inqures">查询</a>
  5. </div>
  6. <!-- 盛放数据的容器 -->
  7. <ul id="order-json"></ul>
  8. </div>

json处理函数

  1. function myjson() {
  2. $.post('../statics/js/data.json', {"phones": $("#search-phone").val()}, function (data) {
  3. for (var i = 0; len = data.length, i < len; i++) {
  4. if (data[i].phones == $("#search-phone").val()) {
  5. $("#order-json").append(
  6. "<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>"
  7. );
  8. }
  9. }
  10. }, 'json');
  11. }
  12. //json数据调用
  13. $('#inqures').click(function () {
  14. $("#order-json").html("");
  15. myjson();
  16. });
  17.  
  18. //电话号码的查询显示结果
  19. $("#order-json").delegate('li', 'click', function () {
  20. $(this).toggleClass('i-link-active').children('.i-link-loacs').toggleClass('i-link-icon');
  21. });

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. node web项目结构

  2. SpringBoot配置自定义日期参数转换器

    1.自定义参数转换器 自定义参数转换器必须实现Converter接口 /** * Created by IntelliJ IDEA. * * @Auther: ShaoHsiung * @Date: ...

  3. springboot thymeleaf ----服务端渲染html

    一. 引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 不这么写 html标签没闭合会报错 二.实际内容在../sta ...

  4. 菜鸟nginx源码剖析数据结构篇(八) 缓冲区链表ngx_chain_t[转]

    菜鸟nginx源码剖析数据结构篇(八) 缓冲区链表 ngx_chain_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  5. 《DSP using MATLAB》Problem 8.1

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  6. python 筛选序列中的元素

    列表生成式 a = [1, 2, 3, 4, -1, -2] b = [i for i in a if a > 0] 如果数据量很大,会产生一个庞大的结果.这时可以用生成器表达式: b = (i ...

  7. day69test

    目录 前端  vue main.js  vue CarTag.vue 小组件  vue Nav.vue小组件  vue Home.vue 页面  vue Car.vue 页面  vue CarDeta ...

  8. vue生成条形码/二维码/带logo二维码

    条形码:https://blog.csdn.net/dakache11/article/details/83749410 //安装 cnpm install @xkeshi/vue-barcode / ...

  9. Spark运行架构详解

    原文引自:http://www.cnblogs.com/shishanyuan/p/4721326.html 1. Spark运行架构 1.1 术语定义 lApplication:Spark Appl ...

  10. Windowns API 第24篇 WTSEnumerateSessions 枚举session信息

    函数原型: BOOL WTSEnumerateSessions( HANDLE hServer, DWORD Reserved, DWORD Version, PWTS_SESSION_INFO* p ...