$.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'); });
///////////////
相关文章推荐
- Bootstrap_进度条
- Bootstrap_缩略图
- 理解ThreadLocal
- 一道算法题
- Android中StackView的使用
- unreal3启动流程总结
- [angularjs] angularjs系列笔记(六)http
- selenium问题记录
- AndroidStudio去掉自己写的未使用的方法下的波浪线
- leetcode 322. Coin Change-硬币交换|动态规划
- Android中Spinner的使用
- OpenCASCADE Data Exchange - 3D PDF
- sqlite-jdbc
- HDU 1698 线段树 区间更新求和
- Bootstrap_警示框
- Android四大组件之Broadcast使用及运行机制
- Flink内存管理源码解读之基础数据结构
- 前端的MVC
- Objective-C Runtime 运行时之一:类与对象
- fis压缩工具的使用